vue项目实战填坑2 watch

watch 对象，对象属性变化，监听不到

原代码使用了vue ，以下分别是template和script部分，

<div v-show="obj[id]"></div>
<div @click="changeVisible(id)">

data:{
return {
obj:{}
}
},
beforeMount:{
this.obj[id] = false
},
watch:{
obj:{
handler(){
},
deep:true
}
}
methods:{
changeVisible(id){
this.obj[id] = !this.obj[id]
}
}

原坑：click事件触发后，明明console出来的结果显示obj[id]的值变了，但是显隐依然没变。

原因：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。请参照https://v1-cn.vuejs.org/guide/reactivity.html

填坑办法：

•    this.$set(object, key, value)
•    this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

正确代码：

<template>
<div>
<p @click="fun1" style="color: blue">方式一</p>
<p @click="fun2" style="color: blue">方式二</p>
</div>
</template>
<script>
export default {
data () {
return {
p: {a: 1}
}
},
methods: {
fun1 () {
console.log('click 1111')
// this.p.b = 2 // 通过点方法赋值，发现观察不到p的变化
this.$set(this.p, 'b', 2) // 第一种解决方式，可以查看日志看到已经监听到了变化
},
fun2 () {
console.log('click 2222')
this.p = Object.assign({}, this.p, {c: 3})
}
},
watch: {
p: {
handler (cval, oval) {
console.log('--------')
console.log(cval, oval)
},
deep: true
}
}
}
</script>
<style>
</style>

    参考——     原文：https://blog.csdn.net/oLianyou1/article/details/79388478  

最后

以上就是鲜艳大地为你收集整理的vue项目实战填坑2 watch的全部内容，希望文章能够帮你解决vue项目实战填坑2 watch所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。