修改对象时 Vue.js watch 不触发

Question

在 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();
  }
}

Answer 1

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

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