我监听了data中定义好的info对象,这是一个包含登录信息的对象,
每当我启动程序后,都会拉取本地数据库的历史登录信息,当有登录历史时,
我做了如下操作:
这个时候我监听这个info时,watch不执行,但是当我注释调这个赋值的代码后,wathc监听正常,之后我做了一个笨办法,就是分别给this.info中的字段赋值,
这样的处理后watch监听正常。
这个问题怎么解决,我不想逐条赋值,因为的info这个对象中有十二个字段,那样做感觉很难看。
this.info = resp.infos[0]
赋值后是对象被替换,watch的对象被释放了,当然不生效。要么赋值后你重置watch操作,要么你就只能替换info里的内容,不能把info本身替换掉。
Vue.js v2.5.16没有问题。。复制后可以直接监听
<script src="https://cn.vuejs.org/js/vue.js"></script>
<div id="demo">{{info}}</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
info: { a: 1, b: 2, c: 3 }
},
watch: {info: function (val) {
console.log('info')
console.log(val)
}
}, mounted: function () {//模拟ajax请求
setTimeout(function () { this.info = { a: 11, b: 22, c: 33 } }.bind(this), 2000)
}
})
</script>
如果你使用版本不支持,可以用for来循环赋值就行了
for(var attr in resp.info[0])this.info[attr] = resp.info[0][attr]
watch:{
'info':{
handler:(val,oldVal)=>{
//对应方法
},
// 深度观察
deep:true
}
},
这样试过吗
vm.$set这个方法试试