javascript - 使 Vue.js 中的拖放排序顺序从 1 开始，而不是 0

Question

我在 Vue.js 中使用拖放进行排序时遇到问题。我的问题是如何使排序顺序从数字 1 开始，而不是从数字 0 开始？在我当前的代码中，拖放后，元素顺序号从从 1 开始变为从 0 开始。

这里是my current code :

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;
      });
    }
  }
});

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>

我尝试过这个:

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>