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

Question

[rusrich]

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

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

Ну и как результат, хотелось бы вывести информацию как на скриншоте.

Answer 1

[0xD34F]

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/

Comments

[rusrich]

Спасибо огромное!

[rusrich]

Функцию вызываю и тогда переключение по спискам не работает.
Как можно поправить?

[0xD34F]

rusrich, предлагаете мне угадать, что означает "функцию вызываю" и т.д.? Нет, так не будет.

[rusrich]

0xD34F, сорри, если выразился неправильно.

Я ваш код добавил в метод, полученную функцию вызвал в html и получил такой результат, при котором списки перестали работать. Зафиксировалось выбранное значение из метода.

Здесь мой результат

[0xD34F]

rusrich, откуда вы взяли, что это должен быть метод? Вы вообще документацию открывали, хотя бы раз?

[rusrich]

0xD34F, можно мне полноценное решение получить, если вас не затруднит?

Про vue на прошлой неделе узнал, купил уроки на udemy, смотрю, изучаю.
JS тоже слабо знаю.
Но на данный момент задача вот такая вот стоит.

[0xD34F]

rusrich,

можно мне полноценное решение получить

Можно. Но не у меня. Всё, что вам надо, есть в ответе - достаточно скопировать код. Откройте документацию, почитайте, и попробуйте догадаться, куда именно его надо копировать.

купил уроки на udemy

Деньги на ветер.

[rusrich]

Просто вынес за пределы data удалил метод и все ок.
Спасибо еще раз!

[Константин Б.]

rusrich,

Про vue на прошлой неделе узнал, купил уроки на udemy, смотрю, изучаю.
JS тоже слабо знаю.

ну так узнайте сначала еще эти две так нужные технологии, а уже потом с их помощью решать какие-то задачи

[rusrich]

Константин Б., спасибо, что вы мне даете очевидные советы на очевидные вещи.
Было бы здорово все сначала изучить, а потом делать, не обращаясь с вопросами на этом сайте, не правда ли?
Но у меня нет времени на все и сразу. Есть задача сейчас, ее надо решить сейчас, а не завтра.
Данный сайт как раз таки и предназначен для этого, если я не ошибаюсь.
И спасибо тем, кто действительно помогает и подсказывает, а не комментирует и умничает.

[Константин Б.]

rusrich, дохрена вас дерзких я смотрю стало, все им не так отвечают. Данный сайт предназначен для того чтобы начинающие разработчики (это не относится к ламерам которые нахватали задач на фрилансе в неизведанной ими области с целью по быстрому срубить бабла) задавали вопросы что им не понятно в той или иной области. Случаи когда человек просто даже не начинал изучение, НО ТРЕБУЕТ решения пишутся не сюда, а сюда.
А тыкать меня как и что отвечать не ты будешь, сосунок