Vue Mover Component Sample

Available Items

vItem 1

vItem 2

vItem 3

vItem 4

vItem 6

vItem 7

vItem 8

vItem 9

vItem 10

vItem 11

vItem 12

vItem 13

vItem 14

Selected Items

xItem 3

xItem 4

vItem 5

More Available Items

wItem 1

wItem 2

wItem 3

More Selected Items

yItem 1

Bound and updated model values (first mover)

[
  {
    "value": "vitem1",
    "displayValue": "vItem 1",
    "isSelected": false
  },
  {
    "value": "vitem2",
    "displayValue": "vItem 2",
    "isSelected": true
  },
  {
    "value": "vitem3",
    "displayValue": "vItem 3",
    "isSelected": false
  },
  {
    "value": "vitem4",
    "displayValue": "vItem 4",
    "isSelected": false
  },
  {
    "value": "vitem6",
    "displayValue": "vItem 6",
    "isSelected": false
  },
  {
    "value": "vitem7",
    "displayValue": "vItem 7",
    "isSelected": false
  },
  {
    "value": "vitem8",
    "displayValue": "vItem 8",
    "isSelected": false
  },
  {
    "value": "vitem9",
    "displayValue": "vItem 9",
    "isSelected": false
  },
  {
    "value": "vitem10",
    "displayValue": "vItem 10",
    "isSelected": false
  },
  {
    "value": "vitem11",
    "displayValue": "vItem 11",
    "isSelected": false
  },
  {
    "value": "vitem12",
    "displayValue": "vItem 12",
    "isSelected": false
  },
  {
    "value": "vitem13",
    "displayValue": "vItem 13",
    "isSelected": false
  },
  {
    "value": "vitem14",
    "displayValue": "vItem 14",
    "isSelected": false
  }
]

[
  {
    "value": "xitem3",
    "displayValue": "xItem 3",
    "isSelected": false
  },
  {
    "value": "xitem4",
    "displayValue": "xItem 4",
    "isSelected": false
  },
  {
    "value": "vitem5",
    "displayValue": "vItem 5",
    "isSelected": false
  }
]