(1)当v-model动态绑定的数据是嵌套多层 例:[{},{}] 这样就不是响应式的
解决:$set, $set为解决双向绑定失效而生(只要数据的地址没有改变,vue是检测不到数据变化的)
this.$set(原数组, 索引值, 需要赋的值)
this.$set(原对象 , 属性,需要赋的值)
<template>
<p v-for="item in errors" :key="item.id">{ {item.message}}</p>
<el-button @click="errorClick">更改</el-button>
</template>
export default {
data () {
return {
errors:[
{ message: "one", id: "1" },
{ message: "two", id: "2" },
{ message: "three", id: "3" }
]
}
}
}
methods: {
errorClick(val){
// this.errors[0] = {message:'11',id:0} // 值改变 但视图没更新
// console.log('this.errors',this.errors[0]); // {message:'11',id:0}
// 1.改变数组
this.$set(this.errors,0,{message:'11',id:0})
// 2.改变对象
this.$set(this.errors[0],'message','four')
}
}