如何在Vue Vuetify中使用单个添加节点按钮添加树视图节点？

Question

我正在vue / vuetify中制作一个Treeview组件，该组件允许用户添加自定义节点。我可以通过在每个孩子旁边都有一个“添加节点”按钮来完成这项工作。但是，一段时间后，这变得有些混乱。我希望在树视图之外有一个“添加节点”按钮。这是棘手的地方。当它与节点串联时，可以将节点作为“项目”传递给我的添加节点函数。如下。

<v-treeview
  v-model="tree"
  :open="open"
  :items="items"
  item-key="name"
>
  <template v-slot:prepend="{ item}">
    <v-btn
      v-if="!item.file"
      color="primary"
      class="ma-2"
      dark
      @click="addFolder(item)"
    >add folder</v-btn>
  </template>
</v-treeview>

<script>
data: () => ({
selectedFile: null,
dialog: false,
dialog2: false,
location: "",
nextId: 0,
open: ["public"],
files: {
  pdf: "mdi-file-pdf"
},
tree: [],
items: [
  {
    name: "Minnesota"
  }
],

editedItem: {
  id: "",
  name: "",
  file: ""
},

editedIndex: -1
}),
addFolder(item) {
  this.editedIndex = this.items.indexOf(item);
  this.editedItem = item;
  this.dialog2 = true;
},

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

  const name = this.location;
  const id = this.nextId++;
  this.editedItem.children.push({
    id,
    name
  });
  this.dialog2 = false;
},
</script>

由于我不再能够将{item}附加到节点按钮，因此我需要一种方法来单击行/节点，然后单击“添加节点”按钮，该按钮现在位于树视图之外。 Vuetify有一个“ Activatable”道具，但是仅突出显示了该行。我需要一种将单击的节点另存为变量，并在“添加节点”按钮中使用它的方法。

我确定这一切都很令人困惑。这是一个希望能明确说明我要执行的操作的Codepen。谢谢！

https://codepen.io/denisj/pen/WNQNKGa

Answer 1

根据您的密码笔代码，必须将.sync添加到:active的v-treeview属性中，因此单击树节点时将设置this.active（或取消选择所选节点时将其取消设置） ：

https://codepen.io/rd3n/pen/PoPqWWj

注意，您也可以将return-object添加到v-treeview以获取完整的对象，而不仅仅是其键。