vue项目中遇到的问题

(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')

         }

}

扩展:双向绑定失效的几种情况

1.当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
2.当你修改数组的长度时,例如:vm.items.length = newLength
3.由于 JavaScript 的限制,Vue不能检测对象属性的添加或删除

猜你喜欢

转载自blog.csdn.net/m0_63304840/article/details/129277501