vuejs的watch钩子函数监听一个对象,在对象被直接赋值后无法去监听。看我详细描述。 5C

我监听了data中定义好的info对象,这是一个包含登录信息的对象,
每当我启动程序后,都会拉取本地数据库的历史登录信息,当有登录历史时,
我做了如下操作:

this.info = resp.infos[0](resp.infos[0]的结构和this.info一致,包含的字段都一样),

这个时候我监听这个info时,watch不执行,但是当我注释调这个赋值的代码后,wathc监听正常,之后我做了一个笨办法,就是分别给this.info中的字段赋值,

如:this.info.account = resp.info[0].account,

这样的处理后watch监听正常。
这个问题怎么解决,我不想逐条赋值,因为的info这个对象中有十二个字段,那样做感觉很难看。

4个回答

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]
showbo
支付宝加好友偷能量挖,胡杨在等着我的召唤 回复wh1246935943: 不用重置啊。。不是都可以触发响应wath事件。。
2 年多之前 回复
wh1246935943
wh1246935943 版本应该和你的一样,我们项目用的是v2.5.2的。
2 年多之前 回复
wh1246935943
wh1246935943 让我赋值后重置watch操作,我怎么重置,网上没查到相关的解答。
2 年多之前 回复
wh1246935943
wh1246935943 有人给我回复说:赋值后是对象被替换,watch的对象被释放了
2 年多之前 回复

this.info = resp.infos[0]
赋值后是对象被替换,watch的对象被释放了,当然不生效。要么赋值后你重置watch操作,要么你就只能替换info里的内容,不能把info本身替换掉。

wh1246935943
wh1246935943 怎么重置watch。
2 年多之前 回复

watch:{

            'info':{
                handler:(val,oldVal)=>{
                                        //对应方法
                },
                // 深度观察
                deep:true
            }
        },


这样试过吗

vm.$set这个方法试试

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问