компонент не будет отображаться снова, хотя свойства изменились

Question

Я хотел бы создать простое приложение "Игра жизни Конвея" и сохранить настройки, которые уже были выполнены, в 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 , а состояние grid из mapSetup должно быть установлено на null. После перенаправления на MapSetup.vue сетка не должна появляться, но если вы отлаживаете this.currentGrid, должна быть двухмерная сетка, которая должна быть визуализирована.

Почему карта остается пустой и не "рисует" сетку?

Answer 1

При создании экземпляра компонента SetupRow в SetupGrid.vue отсутствует пропеллер. SetupRow ожидает следующие реквизиты, но row не передается:

props: {
  row: Array,
  rowIndex: Number
}

Это должно выглядеть так (с row опорой в комплекте):

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

Один из способов избежать этого в будущем - определить свой реквизит с помощью свойства required, как показано ниже. Это приведет к ошибке, если реквизит не пройден:

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