@borisbg81

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

В процессе изучения 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.

Подскажите, пожалуйста, что необходимо поправить в этой задаче.
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Предполагаю, что это связано с...

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

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

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

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

:value="secondList[secondElementSelected]?.elementYes"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы