跟踪 Vue.js 中的 child 状态变化

Question

我有一个组件，其目的是显示项目列表并让用户 select 一个或多个项目。

此组件从后端 API 填充，并由 parent 组件提供 props。

但是，由于从 prop 传递的数据没有我想要的格式，我需要对其进行转换并提供一个具有计算属性.

的视图模型

我可以使用 v-on:click 渲染列表并处理 selection，但是当我设置 selected=true 时，列表不会更新以反映状态的变化child.

我认为这是因为 children 属性更改未被 Vue.js 跟踪，我可能需要使用观察者或其他东西，但这似乎不对。对于微不足道的操作来说，这似乎太麻烦了，所以我必须假设我遗漏了什么。

这是完整的重现：https://codesandbox.io/s/1q17yo446q

通过单击计划 1 或计划 2，您将在控制台中看到它 selected，但它不会反映在呈现的列表中。

有什么建议吗？

Answer 1

在您的示例中，vm 是计算得到的属性。

如果你想要它是反应式的，你必须预先声明它是空的。
在此处阅读更多内容：reactivity in depth。

这是你的例子 working。

或者，如果您的 member 来自父组件，通过 propsData（即：:member="member"），您希望将映射器从 beforeMount 移动到watch 在 member 上。例如：

propsData: {
  member: {
    type: Object,
    default: null
  }
},
data: () => ({ vm: {}}),
watch: {
  member: {
    handler(m) {
      if (!m) { this.vm = {}; } else {
        this.vm = {
          memberName: m.name,
          subscriptions: m.subscriptions.map(s => ({ ...s }))
        };
      }
    },
    immediate: true
  }
}

跟踪 Vue.js 中的 child 状态变化

Tracking a child state change in Vue.js

children

tracking

render

viewmodel

vue.js