Question

在我的应用程序中，当状态更改为时，我使用vuex来管理组件状态。 vuex突变，子组件未重新呈现。这是我在CodeSandbox上的代码：https://codesandbox.io/s/l3lrwv6yll

当我单击蓝色区域中的标题以将项目添加到红色区域时，该突变有效。但是，当我单击“编辑”按钮时，Header组件中的计算属性没有变化。

有人可以帮我吗？

Answer 1

在您的突变editField中，您应该使用Vue.set来检测数组中的变化：

   editField(state, { index }) {
      let update = state.formFieldList[index];
      Vue.set(state.formFieldList, index, {
        name: update.name,
        schema: {
          ...update.schema,
          edit: true
        }
      })
    },

检查Vue文档-Array Changing Caveats

道具变更时，Vue子组件没有重新渲染？

1 个答案: