Как разрешить vuetify treeview иметь возможность добавлять пользовательские именованные узлы? - PullRequest
Новая
       26

Как разрешить vuetify treeview иметь возможность добавлять пользовательские именованные узлы?

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

У меня есть страница, которая позволяет пользователю строить дерево с нуля. Вы начинаете с добавления родительского узла, затем вы сможете щелкнуть по родительскому узлу и открыть диалоговое окно, в котором вы можете назвать дочерний узел для добавления.

Пока я могу добавить первый родительский узел и открыть диалоговое окно для добавления дочернего узла, но не могу сохранить его как дочерний узел. 

<template>
<div>
<v-row justify="space-around">

</v-row>
<v-dialog
  v-model="dialog"
  max-width="300px"
>
  <template v-slot:activator="{ on }">
    <v-btn
      color="primary"
      dark
      class="mb-2"
      v-on="on"
    >New Location</v-btn>
  </template>
  <v-card>
    <v-card-title>
      <span class="headline">{{ formTitle }}</span>
    </v-card-title>

    <v-card-text>
      <v-container>
        <v-row>
          <v-col
            cols="12"
            sm="12"
            md="12"
          >
            <v-text-field
              v-model="editedItem.name"
              label="Location"
            ></v-text-field>
          </v-col>

        </v-row>
      </v-container>
    </v-card-text>

    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn
        color="blue darken-1"
        text
        @click="close"
      >Cancel</v-btn>
      <v-btn
        color="blue darken-1"
        text
        @click="save"
      >Save</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
<v-dialog
  v-model="dialog2"
  max-width="300px"
>

  <v-card>
    <v-card-title>
      <span class="headline">{{ formTitle2 }}</span>
    </v-card-title>

    <v-card-text>
      <v-container>
        <v-row>
          <v-col
            cols="12"
            sm="12"
            md="12"
          >
            <v-text-field
              v-model="editedItem.name"
              label="Printer Group"
            ></v-text-field>
          </v-col>

        </v-row>
      </v-container>
    </v-card-text>

    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn
        color="blue darken-1"
        text
        @click="close"
      >Cancel</v-btn>
      <v-btn
        color="blue darken-1"
        text
        @click="save"
      >Save</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
<v-treeview
  :items="items"
  :dense="dense"
  :selectable="selectable"
  :open-on-click="openOnClick"
  :selected-color="selectedColor"
>
  <template v-slot:prepend="{ item, open }">
    <v-icon
      v-if="!item.file"
      color="green"
      @click="editItem(item)"
    >
      {{ open ? 'mdi-plus' : 'mdi-plus' }}
    </v-icon>
    <v-icon v-else>
      {{ files[item.file] }}
    </v-icon>
    </template>
  </v-treeview>
</div>
</template>
<script>
  export default {
  data: () => ({
  dialog: false,
  dialog2: false,
  formTitle: "New Location",
  formTitle2: "New Printer Group",
  items: [],
  editedIndex: -1,
editedItem: {
  group: ""
},
defaultItem: {
  name: "",
  group: "",
  printer: ""
},
dense: false,
selectable: false,
openOnClick: false,

color: "primary",
selectedColor: "accent",
selectedColors: ["accent", "teal", "red", "success", "warning lighten-2"]
}),
watch: {
  dialog(val) {
    val || this.close();
  }
},
methods: {
  editItem(item) {
    this.editedIndex = this.items.indexOf(item);
    this.editedItem = Object.assign({}, item);
    this.dialog2 = true;
  },

close() {
  this.dialog = false;
  setTimeout(() => {
    this.editedItem = Object.assign({}, this.defaultItem);
    this.editedIndex = -1;
  }, 300);
},

save() {
  if (this.editedIndex > -1) {
    Object.assign(this.items[this.editedIndex], this.editedItem);
  } else {
    this.items.push(this.editedItem);
    }
    this.close();
    }
  }
};
</script>
...