Question

我正在从这里使用vuedraggable组件：https://github.com/SortableJS/Vue.Draggable

我正在这样设置：

<draggable v-model="filteredItems">
  <div class="item" v-for="item in filteredItems">{{item.name}}</div>
</draggable>

filteredItems是这样的计算属性设置：

computed: {
  get: function() {
   return this.items.filter(item => {
     if(item.category_id == this.activeCategory.id) return true;
   })
  },
  set: function(newValue) {
    console.log(newValue);  // This new value is the new data I want.
    return newValue;
  }
}

我认为返回newValue可以正确设置数据，但是只要拖放完成，它就会恢复为原来的值。

这在非计算变量上非常有用，newValue中的数据正是我所需要的，我还不完全了解如何将计算属性设置为newValue

有什么想法吗？我尝试了几种方法来重置计算属性，但是没有一种起作用。

Answer 1

返回新值将不会（重新）设置data项目，但会为其设置“本地”项目（在您的情况下为items）。

computed: {
  filteredItems: {
    // the getter

    set(newValue) {
      // This line
      this.items = newValue;
    }
  }
  
}

P.S。必须删除我以前的 si 答案。我一定很醉，错过了data中已经可以过滤本地项目的事实！

结合使用Vue Draggable和计算数组

1 个答案: