vue watch 无法监听对象里值的变化 问题解决

avatar 2022年07月26日14:32:15 0 521 views
博主分享免费Java教学视频,B站账号:Java刘哥

今天遇到一个前端问题,vuejs2的

子组件 watch 无法到父组件传进来的对象改变

问题介绍

子组件srcipt里部分示例代码如下:

props: {
    queryParams: {
      type: Object,
    }
},
watch: {
	queryParams(val) {
	  // do something
	}
}

 

父组件引用子组件

<Child ref="tb" :query-params="buildQueryParams"/>

script里部分代码示例如下

data() {
    return {
      buildQueryParams: {},
    };
},
methods: {
	initDialog() {
	  // 修改对象里某个属性的值,this.formKey 和 this.formValue为其他字符串属性值
	  this.buildQueryParams[this.formKey] = this.formValue
	}
},

 

发现调用了 initDialog 方法后,修改了 buildQueryParams 对象里面的属性值,但是子组件的 watch 里没有监听到 queryParams 的改成

解决办法如下

查了下资料,说是这个对象没有改变,只是里面的值改变了,于是我尝试先给这个对象赋值为 {} ,再去修改里面的属性,结果成功

即在 initDialog 里添加一行代码

this.buildQueryParams = {}

成功解决

 

 

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
可以匿名评论或者登录后台评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0