修改对象时，Vue.js watch 不会触发
在 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();
}
}
