如何在 <v-treeview> Vuetify 中添加新节点答案

【问题标题】：How to add a new node in <v-treeview> Vuetify如何在 <v-treeview> Vuetify 中添加新节点
【发布时间】：2019-07-10 08:34:03
【问题描述】：

我目前正在使用 Vuetify 制作树视图。树视图使用这种结构：

      items: [
    {
      id: 1,
      name: 'Applications :',
      children: [
        { id: 2, name: 'Calendar : app' },
        { id: 3, name: 'Chrome : app' },
        { id: 4, name: 'Webstorm : app' }
      ]
    },
    {
      id: 5,
      name: 'Documents :',
      children: [
        {
          id: 6,
          name: 'vuetify :',
          children: [
            {
              id: 7,
              name: 'src :',
              children: [
                { id: 8, name: 'index : ts' },
                { id: 9, name: 'bootstrap : ts' }
              ]
            }
          ]
        },
        {
          id: 10,
          name: 'material2 :',
          children: [
            {
              id: 11,
              name: 'src :',
              children: [
                { id: 12, name: 'v-btn : ts' },
                { id: 13, name: 'v-card : ts' },
                { id: 14, name: 'v-window : ts' }
              ]
            }
          ]
        }
      ]
    },
    {
      id: 15,
      name: 'Downloads :',
      children: [
        { id: 16, name: 'October : pdf' },
        { id: 17, name: 'November : pdf' },
        { id: 18, name: 'Tutorial : html' }
      ]
    },
    {
      id: 19,
      name: 'Videos :',
      children: [
        {
          id: 20,
          name: 'Tutorials :',
          children: [
            { id: 21, name: 'Basic layouts : mp4' },
            { id: 22, name: 'Advanced techniques : mp4' },
            { id: 23, name: 'All about app : dir' }
          ]
        },
        { id: 24, name: 'Intro : mov' },
        { id: 25, name: 'Conference introduction : avi' }
      ]
    }
  ]
})

它看起来像这样：

我的问题是在这个结构中添加一个新节点，例如，如果我想在应用程序下添加一个子节点，那么代码可能如下所示：

this.items[0].children.push(newObject)

或者如果我想在src下添加？那么它可能看起来像这样：

this.items[1].children[0].children.push(newObject)

如果我想更深入，那么它可能看起来像这样：

this.items[0].children[0].children[0].children[0].children[0].children.push(newObject)

如您所见，我添加节点的方式会有所不同，并且代码会根据我要添加节点的位置和深度而变化。这意味着没有一个代码可以满足所有位置的需求。我也可以添加和嵌套尽可能多的节点。 例子是谷歌驱动器我应该怎么做？我的想法已经用完了，正在寻找任何可能有帮助的建议。

【问题讨论】：

您可以做的一件事是遍历这些节点并通过id 或name 找到一个，然后只需将.push() 新项目添加到children。
@jom 你能举一个例子来说明如何使用 Vue.set() 和我上面的例子。我阅读了有关 Vue.set() 的信息，我理解它的方式是它只是使它具有反应性。顺便谢谢你的建议。
我发布了一些内容，可能会让您了解如何做到这一点。 Check this out.

标签： javascript vue.js vuetify.js

【解决方案1】：

如果您直接从树中添加节点，最简单的方法是使用作用域插槽。例如，您可以使用append 插槽为每个项目添加一些内容。由于项目被传递到插槽，因此您可以将其传递给可以轻松地将子对象添加到该对象的函数。

<v-app>
  <v-treeview :items="items">
    <template slot="append" slot-scope="{ item }">
      <v-btn @click="addChild(item);">Add child</v-btn>
    </template>
  </v-treeview>
</v-app>

addChild(item) {
  if (!item.children) {
    this.$set(item, "children", []);
  }

  const name = `${item.name} (${item.children.length})`;
  const id = this.nextId++;
  item.children.push({
    id,
    name
  });
}

否则，只需递归遍历树，直到找到要添加的项目。

findItem(id, items = null) {
  if (!items) {
    items = this.items;
  }

  return items.reduce((acc, item) => {
    if (acc) {
      return acc;
    }

    if (item.id === id) {
      return item;
    }

    if (item.children) {
      return this.findItem(id, item.children);
    }

    return acc;
  }, null);
}

你可以在codesandbox中看到一个例子。

【讨论】：