0

Ребята, возник вопрос по навигации по массиву (казалось бы!). Поиск не удался, т.к. запутся и не понимаю, как правильно задать вопрос.

Вобщем задача.

Делаю компонент перетаскиваемого и сортируемого дерева на vue по примеру react компонента

VueNestable

VueNestable

структура данных - массив объектов с вложенными дочерними массивами и т.д.

// примерная структура
const items = [
  {
    _path: [0],
    title: "[0]",
    children:[
      {
        _path: [0,0],
        title: "[0,0]",
        children: []
      },
      {
        _path: [0,1],
        title: "[0,1]",
        children: [
          {
            _path: [0,1,0],
            title: "[0,1,0]",
            children: [/* ... */]
          }
        ]
      },
    ]
  },
  /* ... */
]

Вложенность может быть разной. Элемент имеет параметр _path - массив с его "адресом" в струтуре Как самым красивым образом обратиться к элементу по его _path ?

Например, из любого источника мы получаем _path=[0,2], как вы понимаете, в коде писать items[_path[0]].children[_path[1]] совсем не вариант. А если глубина 5 или 10? Буду благодарен любому совету))

1 ответ 1

2
function getElement(tree, path) {
   return getElement(tree[path.shift()].children, path); 
}

Только обязательно клонируйте path перед вызовом функции, так как массивы передаются по ссылке, а функция меняет переданный в нее path.

Ну и я бы добавил проверки параметров, если есть вероятность невалидных данных в самом дереве.

3
  • Спасибо за наводку)) Еще небольшой вопрос (уже подтупливаю). Как теперь заменить весь корневой элемент (это поддержка реактивности Vue). Полагаю надо клонировать корневой объект со всей струтурой, добраться до последнего объекта в дереве, сделать изменения и заменить корневой элемент при помощи splice()
    – MaxKut
    20 июн 2018 в 13:27
  • @МаксимК, к сожалению не работал с Vue. Не очень понимаю, что именно нужно сделать.
    – Mike Papou
    20 июн 2018 в 13:33
  • Ну да ладно)) И на том спасибо.))
    – MaxKut
    20 июн 2018 в 13:35

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.