@rusrich

Как модифицировать код в VUE, чтобы связанные списки через v-model отображали параметр сразу?

Ссылка на код.

Если в select не использовать v-model, то первый option выбран по умолчанию и отображается в списке.
Если добавить зависимость с помощью v-model, то поле становится пустым.

Ну и как результат, хотелось бы вывести информацию как на скриншоте.
5debccc6d2319361622719.png
  • Вопрос задан
  • 163 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
created() {
  this.chooseChild = Object.values(this.parent)[0];
  this.chooseS = Object.values(this.chooseChild)[0];
  this.showinfo = Object.values(this.chooseS)[0];
},

UPD. А вообще, я бы всё переписал. Хочу, чтобы можно было строить цепочки select'ов произвольной длины.

Вместо отдельных свойств, отвечающих за текущие значения select'ов cделаем массив:

data: () => ({
  selectedValues: [],
  ...

Сделаем вычисляемое свойство, представляющее массивы опций для select'ов и конечное значение. Идём вглубь объекта с данными, используя в качестве ключей выбранные значения:

computed: {
  selectData() {
    const options = [];
    let { items } = this;

    while (items instanceof Object) {
      options.push(Object.keys(items));
      items = items[this.selectedValues[options.length - 1]];
    }

    return {
      options,
      result: items || null,
    };
  },
},

Создадим select'ы и отобразим конечное значение:

<div>
  <select
    v-for="(options, i) in selectData.options"
    v-model="selectedValues[i]"
    @input="selectedValues.length = i"
  >
    <option v-for="n in options">{{ n }}</option>
  </select>
</div>
<div>SELECTED: <b>{{ selectData.result || '&lt; NONE &gt;' }}</b></div>

Чтобы сразу выставить какое-то конечное значение, будем идти вглубь объекта с данными, насколько возможно, всегда выбирая нулевой ключ и помещая его в массив выбранных значений:

created() {
  let { items } = this;
  while (items instanceof Object) {
    const key = Object.keys(items)[0];
    this.selectedValues.push(key);
    items = items[key];
  }
},

https://jsfiddle.net/64m37ng0/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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