vue.js - 如何侦听作为 vuejs 中对象的道具的更改

Question

为什么我的观看对象道具的代码在 vuejs 中不起作用？

我浏览了有关此问题的其他 Q/A 帖子，但没有找到适合我的解决方案。

在我的子组件中，我正在观看这样的过滤器道具......

export default {
  name: "ChildComponent",
  props: ["list", "searchTerms", "filters"]

  watch: {
    filters: {
      deep: true,
      handler: () => {
        console.log("filter updated");
        if (this.voterLayerActive) {
          this.fetchBoundaryBox();
          this.createMapWithLeafletAndMapTiler();
        }
      }
    }

在我的父组件中，我像这样传递过滤器道具......

       <template> ...<ContactsMap :filters="f"></ContactsMap> ...</template>

<script>
...
export default {
  name: "ParentComponent",

  data() {
    return {
      f: {},
      ...
....
</script>

标签： vue.jswatchprop

Answer 1

尝试将您的手表处理程序箭头功能替换为：

  watch: {
    filters: {
      deep: true,
      handler(){
        console.log("filter updated");
        if (this.voterLayerActive) {
          this.fetchBoundaryBox();
          this.createMapWithLeafletAndMapTiler();
        }
      }
    }