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，因为它是异步的。所以我在里面写了一下：

   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
      }
  },

并且我遇到了修改rawArray计算的vue-draggable更改的问题，因为我无法更改draggable中的v-model：

<draggable v-model="array2">

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

Answer 1

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

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

希望有所帮助

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

1 个答案: