Vue 双向数据绑定问题

Question

我自己的 vue 组件发送 http 请求来接收对象数组，然后我将答案存储在 data 属性中，这很好。 现在我想将此数组绑定到 v-model，但是当用户输入某些内容时，我的数组也会发生变化。 我想存储数组以供以后使用并使其不可编辑，我只想将其值绑定到 v-model，而不是引用我的数组。 我的目标是允许用户将 v-model 值重置为从 api 接收的数组。 我希望你明白这一点，你将能够帮助我。

<draggable v-model="myArray">
   <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>
<button @click="addElement">New</button>

data() {
   return {
       myArray: [],
       array: []
   }
},
methods: {
   addElement() {
      myArray.push({id:1, name:'something'});
   },
   getData() {
      axios(...)
      .then(res => {
         this.array = response.data;
      });
   }
   setData() {
      this.myArray = this.array;
   }
}

现在，如果用户将新元素添加到myArray它也将插入array

Answer 1

必须克隆数据：

 new Vue({ template: '<div>List1:<ul><li v-for="i in array1" :key="i.id">{{i.name}}</li></ul>List2:<ul><li v-for="i in array2" :key="i.id">{{i.name}}</li></ul><button @click="add">Add</button></div>', data: { array1: [{id:1, name:'Item1'},{id:2, name:'Item2'}], array2: [] }, created() { // clone array this.array2 = this.array1.map(i => Object.assign({},i)) }, methods: { add() { this.array1.push({id:this.array1.length+1, name:'Item'+(this.array1.length+1)}) this.array1[0].name = 'Item1/' + this.array1.length } } }).$mount('div')

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div></div>

如果是更复杂的对象数组，那么必须使用某种深度克隆。

Answer 2

我使用 JSON 解析解决了一个类似的问题，使要复制的数组与要创建的数组具有松散的动态关系。 请尝试以下操作：

data() {
   return {
       myArray: [],
       array: []
   }
},
methods: {
   addElement() {
      myArray.push({id:1, name:'something'});
   },
   getData() {
      axios(...)
      .then(res => {
         this.array = response.data;
      });
   }
   setData() {
      this.myArray = JSON.parse(JSON.stringify(this.array)); // Here goes the trick
   }
}

这样，用户对 v-model 数组的每次更改都不会反映在 myArray 上，因为 setData() 在用户交互之前至少被调用一次。

希望它适合你。