vue-draggable - 不能直接改变我的数组

Question

我正在使用vue-draggable 来更改数组元素的顺序。假设我的数组是：

data: {
 array1: [{text: 'text1'},{text: 'text2'},{text: 'text3'}]
}

在我的模板上我只是使用：

<draggable v-model="array1" >
v-for etc...
</draggable>

这很好用。

现在我必须将我的代码移动到组件内并使用array1 作为道具。

所以我将我的 array1 移动到子组件内的道具：

props['array1'],

我使用我的 vue-draggable 和 bam： "[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders."

我不能简单地在数据内部声明array1，因为它是异步的。所以我把它写在computed里面：

   array2: {
      get: function () {
        //return JSON.parse(JSON.stringify(this.array1))          
        return this.array1.slice()          
      },
      set: function () {
        this.array2
      }
  },

这显然行不通，因为 getter 总是被硬编码为 prop 的 slice()。我昨天在这里提问：vuejs computed setter of given prop is not reactive

所以建议是编写某种新的计算并在array2 计算中添加 if 语句：

   array2: {
      get: function () {
        if (this.modifiedArray) {
            return this.modifiedArray;
        }
        //return JSON.parse(JSON.stringify(this.array1))          
        return this.array1.slice()          
      },
      set: function () {
        this.proTemplate
      }
  },

我在处理对 modifiedArray 计算的 vue-draggable 更改时遇到了问题，因为我无法更改可拖动的 v-model：

<draggable v-model="array2">

任何人都知道如何更改它以在外部数组/计算中获得 vue 可拖动结果？

Answer 1

我试图复制我对您的问题的理解here

我使用 Lodash 库中的 clone 方法来防止出现 "[Vue warn]: Avoid mutating a prop directly..." 错误。

希望对你有帮助