Как добавить узлы в виде дерева с помощью одной кнопки добавления узла в Vue Vuetify? - PullRequest
Новая
       36

Как добавить узлы в виде дерева с помощью одной кнопки добавления узла в Vue Vuetify?

1 голос
/ 10 апреля 2020

Я делаю компонент дерева просмотра в vue / vuetify, который позволяет пользователю добавлять пользовательские узлы. Я могу выполнять эту работу, имея кнопку «Добавить узел» рядом с каждым ребенком. Тем не менее, это становится немного грязным через некоторое время. Я бы предпочел иметь одну кнопку «Добавить узел» за пределами дерева. Вот где это становится сложно. Когда он встроен в узел, я могу передать узел как «элемент» в функцию добавления узла. Как показано ниже. 

<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» реквизит, но это только выделяет ряд. Мне нужен способ сохранить выбранный узел как переменную и использовать его в кнопке «Добавить узел».

Я уверен, что все это очень запутанно. Вот кодекс, который, надеюсь, прояснит, что я пытаюсь сделать. Спасибо!

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

1 Ответ

0 голосов
/ 12 апреля 2020

На основе кода вашего кодового заглушки вы должны добавить .sync к свойству :active вашего v-treeview, поэтому this.active будет установлено при нажатии на узел дерева (или сброшено при отмене выбора выбранного узла). ):

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

Обратите внимание, что вы также можете добавить return-object к v-treeview, чтобы получить выбранный объект целиком, а не только его ключ.

...