Создание дерева в vue js - неизвестная глубина дерева - Модификация DOM

Question

Я пытаюсь создать приложение vue js, в котором пользователю отображается древовидная структура. Элементы внутри древовидной структуры могут содержать другие элементы, которые могут содержать другие элементы и т. Д. c ... Без ограничений, что означает, что глубина древовидной структуры неизвестна. Если я прав, это означает, что я не могу просто использовать директиву v-for (потому что это означает знать правильную глубину?)

Так что я в основном зацикливаюсь, проходя массив json и создание тегов <ul> и <li> для добавления их к другому тегу в DOM, но если я это сделаю, им не будут применены стили их класса.

Полагаю, это потому, что Vue не нравится тот факт, что мы модифицируем DOM без vue, делающего это для нас.

Кроме того, мы не хотим использовать библиотеки компонентов, такие как vuetify, мы хотим сделать это только с vue и просто javascript.

Спасибо!

Answer 1

Это на самом деле довольно просто в Vue. js.

Что вам нужно сделать, это просто создать компонент, который вызывает себя, но изменяя v-for, чтобы использовать дочерние элементы текущей ветви дерева. .

Важным шагом для выполнения этой работы в Vue является применение имени ключа к компоненту. В противном случае компонент не может вызвать сам себя.

Ниже приведен простой пример использования HTML аккуратного details элемента .

// Your recursive branch component "branch.vue"
const branch = {
  name: 'branch',
  props: {
    branch: {
      type: Object,
      default: () => ({}),
    },
  },
  template: `
    <details>
      <summary>{{ branch.title }}</summary>
      <branch
         v-for="branch in branch.children"
         :key="branch.title"
         :branch="branch"
       />
    </details>
  `,
}

// Your page view(component) where you want to display the tree
new Vue({
  el: '#app',
  name: 'tree',
  components: {
    branch,
  },
  data() {
    return {
      tree: [
        {
          title: 'parent 1',
          children: [
            {
              title: 'child 1',
              children: [
                {
                  title: 'child 1-1',
                  children: [],
                },
                {
                  title: 'child 1-2',
                  children: [],
                },
              ],
            },
          ],
        },
      ],
    };
  },
})

#app > details {
  margin-left: 0;
}
details {
  margin-left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <branch v-for="branch in tree" :key="branch.title" :branch="branch" />
</div>

Answer 2

Решение - создать рекурсивный компонент, например, см. здесь и здесь