Vue：强制子组件对其属性的更改做出反应（这是一个字典）

Question

我目前正在生成一个表格，其中列出了使用此代码生成的组件在所选测试期间遇到的问题：

<tr is="entry" v-for="problem in problems" :key="problem.id" v-bind:foo="problem"></tr>

每个问题对应一个项目，其相关信息包含在问题字典中并在表的前几列中引用。由于同一个项目可能有多个问题，同一个项目可以出现在表格的多行中。现在，每一行都有一些按钮，允许您修改底层项目以解决问题。

每当我修改其中一个基础项目时，我都需要在所有行中修改它，我通过调用父组件中的函数来完成，但修改字典中的数据似乎不会触发我的任何手表或在子组件内部进行计算，目前看起来像这样：

Vue.component('entry', {
  props: ['foo'],
  data: function(){ 
    //does some computations
    return data
  },
  watch:{
    foo: function(){
      this.recompute_entry()
    },
  },
  methods:{
    //various methods, including:
    recompute_entry: function(){
      //updates the data according to changes brought to the entry
    },
  },
});

我试图包含一个不同的道具，我可以将它绑定到我的父组件列表中的一个条目，但是，除了非常笨重之外，它最终也没有工作，这让我觉得我可能已经得到了我的组件有问题。

最终，我依赖于 v-for 以有序的方式遍历我的列表这一事实，再加上我在父组件中没有生成其他子组件的事实意味着子组件将具有相同的索引我的组件的子数组，就像在我的问题数组中一样。因此我可以使用这个：

this.$children[problem_index].recompute_entry();

哪一种感觉有点骇人听闻和不可靠，但确实有效，一次。是否没有其他更安全的方法可以根据对其道具所做的更改重新计算我的子组件？我真的觉得必须有。

Answer 1

我可能需要查看确切的实现，但听起来您需要克隆字典以触发道具更改，即：

let newProblem = Object.assign({}, this.problem);
// change any nested property
newProblem.some.value = 1
// assign back the cloned and modified dictionary
this.problem = newProblem