Как в select положить все значения включая вложенные из массива объектов?

Question

[KhalBay]

Есть список пользователей (массив из объектов). Объекты могут до бесконечности вложены друг в друга:

elements: [
  {id: 1, name: 'Марина', tel: '[phone]', children: ''},
  {id: 2, name: 'Петр', tel: '[phone]', children: ''},
  {id: 3, name: 'Алексей', tel: '[phone]', children: [
    {id: 4, name: 'Иван', tel: '[phone]', children: [
      {id: 5, name: 'Егор', tel: '[phone]', children: [
        {id: 6, name: 'Анна', tel: '[phone]', children: [
          {id: 7, name: 'Ирина', tel: '[phone]', children: [
            {id: 8, name: 'Анастасия', tel: '[phone]', children: [
              {id: 9, name: 'Сергей', tel: '[phone]', children: ''},
            ]},
          ]},
        ]},
      ]},
    ]},
  ]},
  {id: 10, name: 'Борис', tel: '[phone]', children: ''},
]

Я сделал рекурсивный компонент который выводит этот список:


Сейчас мне нужно добавлять нового пользователя с возможностью выбора родителя, через тег SELECT.
Как получить список всех пользователей в селект? Сейчас получаю только тех, кто на самом верхнем уровне.
Сделать option рекурсией не выходит. Я могу просто собрать всех через querySelectorAll, но думаю, это не самое лучшее решение, и как потом добавлять нового пользователя в конкретного родителя, тоже не могу догадаться.

Вот компонент селект

<template>
  <select
    v-bind:value="user.head"
    @input="user.head = $event.target.value"
  >
    <option value=""></option>
    <option v-for="user in elements" :key="user">{{user.name}}</option>
  </select>
</template>

<script>
export default {
  props: {
    elements: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      user: {
        name: '',
        tel: '',
        head: '',
      }
    }
  }
}
</script>

Вот так реализована рекурсия для вывода списка:

Родительский компонент

<template>
  <div class="table">
    <div class="element">
      <div class="wrap">
        <div class="table-name">Имя</div>
        <div class="table-tel">Телефон</div>
      </div>
    </div>
    <User
      class="element"
      v-for="user in elements"
      :key="user.id"
      :id="user.id"
      :user="user"
    >
    </User>
  </div>
</template>

<script>
import User from "./User";
export default {
  components: {User},
  props: {
    elements: {
      type: Array,
      required: true
    }
  },
  methods: {}
}
</script>

Компонент юзер

<template>
  <div>
    <div class="wrap">
      <div class="element-name">{{ user.name }}</div>
      <div class="element-tel">{{ user.tel }}</div>
    </div>
    <User
      class="child"
      v-for="child in user.children"
      v-bind:user="child"
      :key="child.id"
      :parentItem="user"
    />
  </div>
</template>

<script>
export default {
  name: 'User',
  props: {
    user: {
      type: Object,
      required: true
    },
    parentItem: {
      required: false
    }
  }
}
</script>

Comments

[Александр Маджугин]

Сделайте вычисляемое свойство, в котором будете формировать список из вашего дерева и всё. Пусть оно будет источником для списка.

[KhalBay]

Александр Маджугин, Я не совсем понял вашу идею, во вью всего неделю, если не сложно могли бы привести небольшой пример или аналогию где это сделано?

[Александр Маджугин]

KhalBay, 0xD34F уже даже написал готовое решение.

Answer 1

[0xD34F]

Понадобится функция, которая вложенные массивы развернёт в один плоский:

// есть вариант применить рекурсию
const flat = (arr, childrenKey = 'children') =>
  (arr instanceof Array ? arr : []).reduce((acc, n) => (
    acc.push(n, ...flat(n[childrenKey], childrenKey)),
    acc
  ), []);

// а можно обойтись и без неё
const flat = function(arr, childrenKey = 'children') {
  const result = [];

  for (const stack = this(arr); stack.length;) {
    const { [childrenKey]: c, ...n } = stack.pop();
    result.push(n);
    stack.push(...this(c));
  }

  return result;
}.bind(x => Array.isArray(x) ? [...x].reverse() : []);

Дальше всё просто - вычисляемое свойство, v-for по его значению:

computed: {
  users() {
    return flat(this.elements);
  },
},

<option v-for="n in users" :key="n.id">{{ n.name }}</option>

Comments

[KhalBay]

ВАУ! Ого, спасибо это то что нужно. Теперь буду разбираться как это работает!

Answer 2

[Антон Шаманов]

Сделать option рекурсией не выходит.

почему? или ты пытаешься их вкладывать друг в друга? если так то, select поддерживает только 1 ур вложенности т.ч. либо делай вложенные dropdown меню мимикрирующие под select(ы) и сохраняй значение в input'е, либо используй стандартный select,а уровень вложенности отображай отступом в option'аx:

<option value="1">1пункт 1ур</option>
<option value="2">- 1пункт  2ур</option>
<option value="2">- 2пункт 2ур</option>
<option value="2">- - 1пункт 3ур</option>
<option value="2">2пункт 1ур</option>

Comments

[KhalBay]

Я не вкладывал их друг в друга. В селекте, я дополнительно вызывал компонент Option но в нем получается нельзя ничего хранить кроме option и поскольку это vue2 я не могу использовать v-for на корневом компоненте.
Максимум чего я смог добиться используя чтобы добавить рекурсию это вывод Ивана, но глубже не получилось. Так же были ещё пустые поля, если у вас есть пример использования option в рекурсии, я бы с радостью изучил. Нужно использовать только select