{ "label": "first", "value": 0 }
{ "label": "second", "value": 1 }
{ "label": "third", "value": 2 }
{ "label": "fourth", "value": 3 }
{ "label": "fifth", "value": 4 }
{ "label": "sixth", "value": 5 }

label: first

index: 0

label: second

index: 1

label: third

index: 2

label: fourth

index: 3

label: fifth

index: 4

label: sixth

index: 5


The list in data object is updated. Value :

  [{
"label":"first",
"value":0
},
{
"label":"second",
"value":1
},
{
"label":"third",
"value":2
},
{
"label":"fourth",
"value":3
},
{
"label":"fifth",
"value":4
},
{
"label":"sixth",
"value":5
}]

How to use it ?

  <template>
  <MazDraggableList
    v-model="list"
  />
</template>

<script>
  import { MazDraggableList } from 'maz-ui'
  export default {
    components: { MazDraggableList }
    data () {
      return {
        list: [
          { label: 'first', value: 0 },
          { label: 'second', value: 1 },
          { label: 'third', value: 2 },
          { label: 'fourth', value: 3 },
          { label: 'fifth', value: 4 },
          { label: 'sixth', value: 5 }
        ]
      }
    }
  }
</script>