Vue双向数据绑定问题
Vue双向数据绑定问题
提问于 2020-02-28 01:09:57
我自己的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中
回答 2
Stack Overflow用户
发布于 2020-02-28 04:04:50
数据必须克隆：
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>
如果是更复杂的对象数组，则必须使用某种深度克隆。
Stack Overflow用户
发布于 2020-02-28 04:46:10
我使用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()。
希望它适合你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60438476
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号