Понадобится функция, которая позволит вложенные массивы развернуть в один плоский:
// есть вариант применить рекурсию
const flatTree = (tree, childrenKey) =>
(tree instanceof Array ? tree : []).reduce((acc, n) => (
acc.push(n, ...flatTree(n[childrenKey], childrenKey)),
acc
), []);
// а можно обойтись и без неё
const flatTree = function*(tree, childrenKey) {
const stack = [];
for (let [ i, arr ] = this(tree); ++i < arr.length || stack.length;) {
if (i === arr.length) {
[ i, arr ] = stack.pop();
} else {
yield arr[i];
stack.push([ i, arr ]);
[ i, arr ] = this(arr[i][childrenKey]);
}
}
}.bind(x => [ -1, Array.isArray(x) ? x : [] ]);
Дальше всё просто - вычисляемое свойство,
v-for по его значению:
computed: {
users() {
// если использовать обычную функцию
return flatTree(this.elements, 'children');
// или, генератор
return [...flatTree(this.elements, 'children')];
},
},
<option v-for="n in users" :key="n.id">{{ n.name }}</option>
