制造阻力＆amp;在Vue.js中删除排序顺序从1开始，而不是0

Question

我使用拖放操作排序顺序有问题。落入Vue.js.我的问题是如何使排序顺序从数字1开始，而不是从数字0开始？使用我当前的代码，在我拖动之后drop，元素顺序号从1开始变为0开始。

以下是my current code：

＆＃13;

＆＃13;

new Vue({
  el: '#app',
  template: '#dragdrop',
  data() {
    return {
      list: [
      	{name: 'Item 1', id: 1, order: 1}, 
        {name: 'Item 2', id: 2, order: 2}, 
        {name: 'Item 3', id: 3, order: 3}, 
        {name: 'Item 4', id: 4, order: 4}, 
        {name: 'Item 5', id: 5, order: 5}, 
        {name: 'Item 6', id: 6, order: 6}, 
       ],
    }
  },
  ready() {
  	var vm = this;
    Sortable.create(document.getElementById('sort'), {
      draggable: 'li.sort-item',
      ghostClass: "sort-ghost",
      animation: 80,
      onUpdate: function(evt) {
        console.log('dropped (Sortable)');
        vm.reorder(evt.oldIndex, evt.newIndex);
    	}
    });
  },
  methods: {
    reorder(oldIndex, newIndex) {
      // move the item in the underlying array
      this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
      // update order property based on position in array
      this.list.forEach(function(item, index){
        item.order = index;
      });
    }
  }
});

＆＃13;

ul.sort {
  list-style: none;
  padding: 0;
  margin: 30px;
}

li.sort-item {
  padding: 10px;
  width: 25%;
  float: left;
  margin: 0 10px 10px 0;
  background: #EFEFEF;
  border: solid 1px #CCC;
}

.sort-ghost {
  opacity: 0.3;
  transition: all 0.7s ease-out;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>

<div id="app">
  <dragdrop></dragdrop>
</div>

<template id="dragdrop">
  <ul id="sort" class="sort cf">
    <li class="sort-item" order="{{ item.order }}" v-for="item in list">
      {{ item.name }} - ({{ item.order}})
    </li>
  </ul>
</template>

＆＃13;

＆＃13;

＆＃13;

我试过了：

this.list.splice(newIndex, 1, this.list.splice(oldIndex, 1)[1]);

但它不起作用。

Answer 1

在JS的这一部分：

// update order property based on position in array
this.list.forEach(function(item, index){
  item.order = index;
});

只需将第三行更改为：

item.order = index + 1;

完整的工作代码：

new Vue({
  el: '#app',
  template: '#dragdrop',
  data() {
    return {
      list: [
      	{name: 'Item 1', id: 1, order: 1}, 
        {name: 'Item 2', id: 2, order: 2}, 
        {name: 'Item 3', id: 3, order: 3}, 
        {name: 'Item 4', id: 4, order: 4}, 
        {name: 'Item 5', id: 5, order: 5}, 
        {name: 'Item 6', id: 6, order: 6}, 
       ],
    }
  },
  ready() {
  	var vm = this;
    Sortable.create(document.getElementById('sort'), {
      draggable: 'li.sort-item',
      ghostClass: "sort-ghost",
      animation: 80,
      onUpdate: function(evt) {
        console.log('dropped (Sortable)');
        vm.reorder(evt.oldIndex, evt.newIndex);
    	}
    });
  },
  methods: {
    reorder(oldIndex, newIndex) {
      // move the item in the underlying array
      this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
      // update order property based on position in array
      this.list.forEach(function(item, index){
        item.order = index + 1;
      });
    }
  }
});

ul.sort {
  list-style: none;
  padding: 0;
  margin: 30px;
}

li.sort-item {
  padding: 10px;
  width: 25%;
  float: left;
  margin: 0 10px 10px 0;
  background: #EFEFEF;
  border: solid 1px #CCC;
}

.sort-ghost {
  opacity: 0.3;
  transition: all 0.7s ease-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>

<div id="app">
  <dragdrop></dragdrop>
</div>

<template id="dragdrop">
  <ul id="sort" class="sort cf">
    <li class="sort-item" order="{{ item.order }}" v-for="item in list">
      {{ item.name }} - ({{ item.order}})
    </li>
  </ul>
</template>