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 || '< NONE >' }}</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/
