vue.js - 在 vuejs 上观看 Prop 变化

标签 vue.js vuejs2

我想在子组件上使用 watch 属性,但它不起作用。

这是我的代码:

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

不幸的是它不起作用

我看过这篇文章并尝试了所有方法,但没有任何效果:VueJs 2.0 - how to listen for `props` changes

我用 Vue Devtools 检查了我的 Prop ,它正在改变。

提前感谢社区!

最佳答案

根据该代码,它应该 可以工作,所以问题可能出在其他地方。你能发布更多代码吗?

如果想立即运行,可以使用immediate。这是语法:

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

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

当你在父组件中更新这个对象的一部分时,确保你使用了 Vue 的 $set 函数。

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

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

关于vue.js - 在 vuejs 上观看 Prop 变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51292803/

相关文章:

javascript - Vue JS - 使用 innerHTML 呈现的动态创建的组件不能绑定(bind)到事件

html - 由于 div 的高度,页面没有从顶部开始

javascript - 如何访问Vue中所有组件中的对象内部的数据

laravel-5 - 使用 laravel、Socket 和 Redis 动态更改 channel

javascript - 在 Vue JS 中删除元素时的动画在开发中工作但不在生产中

vue.js - 在 Vue.js 中使用 computed 并且当 mounted 被调用时 computed 属性仍然是空的

javascript - 如何在 vue js html 中根据时间显示 "Closed"或 "Open"?

vue.js - 在 v-data-table 中的列中选择选项或下拉菜单

typescript - Vuex + typescript

javascript - VueJS 数据未 react 安装