Question

我有一个可以通过拖放进行排序的列表。它有效 https://codepen.io/destroy90210/pen/rGEodB

现在我想要包含该功能，按名称，日期和位置对列表进行排序。

因此，如果我看到按名称或日期排序的列表，我会阻止拖放功能。仅当选择了位置时，从下拉列表中，项目才可以拖动，但现在我的拖放功能不再起作用。这些物品跳回旧位置......

https://codepen.io/destroy90210/pen/yzdQxK

<div id="main">
  <select class="dd" v-model="orderBy" @change="sortedData">
    <option value='created'>created</option>
    <option value='abc'>Abc</option>
    <option value='position'>Position</option>
  </select>
  <draggable :list="data" class="dragArea" @change="changeOrder" :options="{draggable:'.card--dragable'}">
    <div :class="{'card--dragable': isDragable}" class="card" v-for="item in sortedData"><span class="card__label">{{item.name}}</span></div>
  </draggable>
</div>

new Vue({
  el: "#main",
  data: {
    data: data,
    orderBy: 'position',
    isDragable: true,
  },
  computed:{
    sortedData(){
      this.isDragable = false;
      if (this.orderBy === 'abc') {
        return this.data.sort((a, b) => { return a.name.localeCompare(b.name); });
      } else if (this.orderBy === 'created') {
        return this.data.sort((a, b) => { return a.id > b.id; });
      }
      this.isDragable = true;
      return this.data.sort((a, b) => { return a.position > b.position; });
      },
    },
    methods:{
      changeOrder(e){
      const oldIndex = e.moved.oldIndex;
      const newIndex = e.moved.newIndex;

      let i = Math.min(oldIndex, newIndex);
      const max = Math.max(oldIndex, newIndex) + 1;
      for (i; i < max; i += 1) {
        this.data[i].position = i;
      }
    }
  }
});

Answer 1

修复：https://codepen.io/destroy90210/pen/jGgNBN

sortedData()是您的codepen中的计算元素，这意味着它将在其依赖项更新时执行（在您执行拖放操作时执行changeOrder()的情况下）。

请改用方法，以便仅在以下更改事件更新select时执行：

<select class="dd" v-model="orderBy" @change="sortedData">

这意味着我们可以通过将sortedData()从计算机移动到方法来解决问题。现在它再也不会更新了。

Documentation about computed vs methods.

vuejs2可拖动和可排序的列表

1 个答案: