代码之家 › 专栏 › 技术社区 › foufrix

观看Vuejs上的道具更改

vue.js

5

foufrix · 技术社区 · 7 年前

我想用手表在一个儿童组件上做道具,但它不起作用。

这是我的代码:

props: {
    searchStore: {
        type: Object
    }
},
watch: {
    searchStore(newValue) {
        alert('yolo')
        console.log(newValue)
    }

不幸的是它没用

我看了这篇文章,什么都试过了,什么都没用: VueJs 2.0 - how to listen for `props` changes

我用vue devtools检查了我的道具,它正在变化。

提前感谢社区!

2 回复 | 直到 7 年前

1

10

Daniel 7 年前

基于那个代码,它应该工作,所以问题可能在别的地方。你能再发些代码吗?

如果你想马上跑,你可以用 immediate 是的。这是语法:

  watch: {
    searchStore: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {

      }
    }
  },

这个 deep: true 设置将深入观察对象内部的变化。

在父组件中更新此对象的部分时,请确保使用Vue的 $set 功能。

this.$set(this.searchStore, 'myKey', {price: 12.22});

进一步阅读: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

2

0

Yaniv Peretz 7 年前

可能是“搜索商店”没变吧?

由于它是一个对象,Vue正在监视要传递的对象的新引用。

意思是(不会触发监视):

roorsearchstore.a=新瓦尔

不会触发手表(因为引用未更改)。

你可以像丹尼尔说的那样看得很深, 或执行object.assign,如下所示:

rootSearchStore=object.assign({},roorSearchStore,{a:newval})。

或者尝试查看rootsearchstore中更改的时间戳。