代码页面比较长,截了有问题的地方,我form.multipleSelection,开始有3个对象,页面也渲染了3条数据,然后触发closeInput()删除其中一条,如图打印删除前后,已经证明删除了一条,但页面还是渲染三个,为什么视图不更新,是某种原因无法检测数组的变动吗?
<div class="div-hover" v-for="(item,index) in form.multipleSelection" :key="index">
<el-form-item :label="item.name">
<i class="el-icon-close" @click="closeInput(index)"></i>
<el-input v-model="item.value" placeholder="请输入"></el-input>
<span>{{item.unit}}</span>
</el-form-item>
</div>
closeInput(index) {
console.log(this.form.multipleSelection);
this.form.multipleSelection.splice(index, 1);
console.log(this.form.multipleSelection);
},
我尝试去写了一下你的代码,没有出现你说的效果,不过之前我也遇到过splice导致数组不更新的问题,用vue.Set()解决的
具体原因查看了,感觉这篇文章能让你有些心得,分享给你~
记一次思否问答的问题思考:Vue为什么不能检测数组变动