尽管属性已更改，但组件不会再次呈现答案

【问题标题】：component won't render again although properties have changed尽管属性已更改，但组件不会再次呈现
【发布时间】：2019-06-06 06:11:43
【问题描述】：

我想创建一个简单的“康威人生游戏”应用程序并将已经进行的设置存储到 localStorage。

我创建了三个视图

地图设置 |定义地图大小等。
地图设置 |为您的地图创建预设
地图启动 |启动您的预设

每当设置更改时，都必须删除预设，因为预设可能具有不同的旧尺寸。如果 localStorage 为空，则设置使用默认值。

在我的商店中，我将地图设置保存到 grid 属性。所以值要么是null，要么是来自localStorage的二维数组。

当路由到 MapSetup.vue 文件时，我使用挂载事件来设置预设

  mounted: function() {
    if (this.grid) { // the preset from the store / localStorage
      this.currentGrid = this.grid; // use the preset
    } else {
      this.currentGrid = this.generateNewMap(); // generate a new preset
    }
  }

this.currentGrid 例如可以有 50x50 的大小。我在这里创建了我的应用程序的工作示例

https://codesandbox.io/s/vuetify-vuex-and-vuerouter-h6yqu

您可以在 MapSettings.vue 中定义设置，mapSetup 中的grid 状态应设置为null。重定向到 MapSetup.vue 后，不会出现网格，但如果您调试 this.currentGrid，则应该呈现一个二维网格。

为什么卡片一直是空的并且不会“绘制”网格？

【问题讨论】：

标签： javascript vue.js vuejs2 vuex vue-router

【解决方案1】：

在 SetupGrid.vue 中实例化 SetupRow 组件时缺少一个 prop。 SetupRow 需要以下道具，但 row 未通过：

props: {
  row: Array,
  rowIndex: Number
}

它应该看起来像这样（包括row 道具）：

<SetupRow
  v-for="(row, rowIndex) in grid"
  :key="rowIndex"
  :row="row"
  :rowIndex="rowIndex"
  @rowClicked="onRowClicked"
/>

将来避免这种情况的一种方法是使用required 属性定义您的道具，如下所示。如果没有传递prop，这将产生错误：

props: {
  row: {
    type: Array,
    required: true
  },
  rowIndex: {
    type: Number,
    required: true
  }
}

【讨论】：