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

【问题标题】：Make drag & drop sort order in Vue.js start at 1, not 0使 Vue.js 中的拖放排序顺序从 1 开始，而不是 0
【发布时间】：2016-05-22 10:03:06
【问题描述】：

我在 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]);

但它不起作用。

【问题讨论】：

数组索引从 0 开始，如果您希望 order 属性从 1 开始，只需在分配 order 属性时将 1 添加到索引。
@GillesC 谢谢你的回答，但你能给我举个例子吗，或者从我的jsfiddle.net/badvz/rubagbc5/22更新

标签： javascript jquery vue.js

【解决方案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>

【讨论】：