极客观点
项目管理
HarmonyOS
vue v-model 循环绑定数据 不同输入框，数据却同步了。为什么？
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue测试</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div class="container" id="app">
<el-form ref="addForm" :model="customerInfo" label-width="100px">
<el-form-item label="个数：">
<el-select v-model="customerInfo.babyCount" placeholder="请选择信息个数：" @change="setChildList">
<el-option label="无" value="0">无</el-option>
<el-option label="1个" value="1">1个</el-option>
<el-option label="2个" value="2">2个</el-option>
<el-option label="3个" value="3">3个</el-option>
<el-option label="4个" value="4">4个</el-option>
</el-select>
</el-form-item>
<div class="childrenList" v-show="customerInfo.babyInfoJson.length > 0">
<div class="child" :key="key" v-for="(child, key) in customerInfo.babyInfoJson">
<h4 class="title">信息{{key+1}} </h4>
<el-form-item label="信息名称：">
<el-input v-model="child.babyName"></el-input>
</el-form-item>
{{child}}
</div>
</div>
{{customerInfo.babyInfoJson}}
</el-form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
let vue = new Vue({
el: '#app',
data(){
return {
baby: {
babyName: ''
},
customerInfo: {
babyCount: '',
babyInfoJson: [],
}
}
},
methods: {
setChildList(){
let length = parseInt(this.customerInfo.babyCount, 10);
if(length <= 0){
this.customerInfo.babyInfoJson = [];
return;
}
this.customerInfo.babyInfoJson = [];
let baby = this.baby;
for(let i = 0; i < length; i += 1){
this.customerInfo.babyInfoJson.push(baby);
}
},
}
})
</script>
</body>
</html>你期待的结果是什么？实际看到的错误信息又是什么？
本来是想循环出来，获取到每一个绑定数据的值，然后提交到后台的，现在修改一个其他的输入框会一起修改，不知道为什么？
问题在这段，对象是引用类型，你没有做隔离直接
push会导致数组内的所有对象都指向同一个地址。做个浅拷贝隔离对象引用即可