javascript - vue 双向数据绑定问题
问题描述
我自己的 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
解决方案
必须克隆数据:
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>
如果是更复杂的对象数组,那么必须使用某种深度克隆。
推荐阅读
- akka - 如何在 Actor 模型框架(例如,akka.net)中执行非幂等操作(发送电子邮件)?
- python - Keras 中的展开层
- c# - 通过 Microsoft Team Foundation Server 2018 中的 API 从模板创建任务
- java - 如何创建 Spring Boot 控制器
- jquery - 用 jQuery 承诺
- c++ - C++ GetDC 所有监视器
- python - 如何在 config.ini 文件中加载环境变量?
- c - 使用数组实现堆栈
- php - PHP array of string pick 2 elements only
- python - 如何使用 Selenium 和 PhantomJS 从 Python 单击并上传网页上的文件?