Vue.js: как настроить связанные списки с многомерным массивом?

Question

[borisbg81]

В процессе изучения vue решил расширить стандартный вариант использования выпадающих списков и сделать что-то вроде выбора по параметрам (ссылка на jsfiddle)

Всё хорошо работает, пока в Элементе2 у каждого параметра одинаковое количество пунктов. Столкнулся со следующим поведением, если в одном параметре Элемента2 количество пунктов больше, чем в других:
- в Элементе1 выбираю пункт, у которого в Элементе2 больше пунктов (в данном случае - 30);
- в Элементе2 выбираю последний пункт;
- затем в Элементе1 выбираю параметр с меньшим количеством пунктов;
- в Элементе2 не появляется выбранным ни один пункт, который есть у Элемента1 и остаются данные от предыдущего выбора.

Предполагаю, что это связано с использованием v-model для Элемента2. В документации vue сказано, что v-model игнорирует начальное значение selected и его надо объявлять внутри data. Но в разделе data объявляется 'secondElementSelected: 0', поэтому не могу понять, что сделано не так.
Если для Элемента2 убираю v-model - выбор параметров происходит нормально, но не меняются данные в Элементе4.

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

Answer 1

[0xD34F]

Предполагаю, что это связано с...

Предполагать не надо - достаточно открыть консоль, и увидеть, что возникает ошибка из-за попытки чтения свойства несуществующего объекта.

Можете следить за изменением списка, и если выбранный элемент отсутствует, устанавливать в качестве выбранного какой-нибудь существующий (нулевой, например):

watch: {
  secondList(val) {
    if (!val[this.secondElementSelected]) {
      this.secondElementSelected = 0;
    }
  },
},

Или, можете использовать optional chaining при обращении к свойствам выбранного элемента:

:value="secondList[secondElementSelected]?.elementYes"

Comments

[borisbg81]

Спасибо за ответ - всё получилось.

Ошибку, что 'secondList[secondElementSelected] is undefined' видел - но почему-то решил, что это связано с выводом данных в Элементе4. Наверное, сбило с толку то, что сам Элемент2 объявлен.
Пробовал задавать параметр через событие @change - но до такой проверки не додумался. Сейчас попробовал ваше решение с @change - тоже получилось.

Ещё раз спасибо.