修改对象时，Vue.js watch 不会触发答案

【问题标题】：Vue.js watch not triggering when object is modified修改对象时，Vue.js watch 不会触发
【发布时间】：2020-04-10 05:25:59
【问题描述】：

在 Vue.js 中，我有三个模板应该协同工作来触发新结果的加载。我的容器模板是包含过滤器和结果模板的通用模板。当过滤器模板中的对象发生更改时，我在我的结果模板中进行watch() 触发更改时遇到了一些困难。流程非常简单。以下是我目前拥有的内容以及流程的工作原理：

过滤器模板：单击时，我的对象属性会更新为新值，并将此更改发送到容器模板。

<span v-on:click='setClient(client.ccid)'>{{client.name}}</span>

data: function() {
    return {
        formData: {
            perPage: 15,
            clientId: null
        }
    }
}

setClient: function(clientId){
  this.formData.clientId = clientId;
  this.$emit('filters-update', this.formData);
}

容器模板： - 这只是保存过滤器和结果模板并将修改后的对象传递给结果模板的角色。

<template>
   <div class="row">
     <filters v-on:filters-update="filtersUpdate"></filters>
     <results :filters='filters'></results>
   </div>
</template>

<script>
export default {
    data: function() {
       return  {
          filters: {}
       }
    },

    methods: {
        filtersUpdate: function(params){
            this.filters = params;
        }
    }
}
</script>

结果模板：

export default {
  props: {
    filters: {
        type: Object
    },
  }
}

watch: {
  filters: function(){
    console.log("loading new results..");
    this.loadData();
  }
}

【问题讨论】：

您是否尝试过深入观察对象变化？ stackoverflow.com/questions/42133894/…
1，控制台日志是否确认filtersUpdate 被调用？ 2. watch 是从来没有被调用过，还是只被调用过一次？看来您每次都会发出相同的对象，所以我只希望它第一次触发watch。 3. 您为results 组件发布的代码在组件选项之外有watch 部分。我假设它在你真实代码中的选项对象内？
@skirtle 1) 是的，当我尝试调试整个流程时，控制台中有输出，因此调用了filtersUpdate。 2) 在创建过滤器模板时最初调用手表，我发出formData 对象，其中包含每页的结果数，以获取results 模板。这按预期工作，并触发了手表。 3）张贴括号是我的坏事，手表实际上在export default对象内
@AndreyPopov 谢谢。我试过了，它有效：deep: true, handler(){ this.loadData(); }

标签： vue.js

【解决方案1】：

显然要监视对象属性的变化，您需要一个deep watch https://vuejs.org/v2/api/#watch

watch: {
    filters: {
        deep: true,
        handler(){
            this.loadData();
        }
    }
}

【讨论】：