@Stim7

V-slot: как пропустить первый элемент?

Всем привет, использую слоты при построение дерева (объект "шаблон" будет добавляться динамически и сколько угодно), фреймворк - vuetify и компонент для построения дерева - v-treeview.
Проблема в том, что слот добавляет кнопки (на скриншоте подчеркнуты) папке в которой лежат шаблоны и эти кнопки на самой папке не нужны. Как их убрать?

5fa3dcc03921d827618051.png

<template v-slot:append="{ TreeViewTemplates } ">
            <v-btn small> <v-icon>mdi-plus-box</v-icon> </v-btn>
            <v-btn small><v-icon>mdi-file-edit-outline</v-icon></v-btn>
            <v-btn small v-show="false"><v-icon>mdi-content-save-settings</v-icon></v-btn>
            <v-btn small> <v-icon>mdi-minus-circle-outline</v-icon></v-btn>
          </template>


TreeViewTemplates: [
       {
        name: "Шаблоны",
        children: [
          {
            name: "Шаблон-1",
            file: "template",
          },
          {
            name: "Шаблон-2",
            file: "template",
          },
        ],
      },
    ],
  • Вопрос задан
  • 170 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
кнопки на самой папке не нужны

У слотов treeview есть параметр, указывающий, является ли текущий элемент дерева листом (т.е., не содержит дочерних элементов). Используйте его значение для условного рендеринга контента слота:

<template #append="{ leaf }">
  <template v-if="leaf">
    <v-btn small><v-icon>mdi-plus-box</v-icon></v-btn>
    <v-btn small><v-icon>mdi-file-edit-outline</v-icon></v-btn>
    <v-btn small><v-icon>mdi-content-save-settings</v-icon></v-btn>
    <v-btn small><v-icon>mdi-minus-circle-outline</v-icon></v-btn>
  </template>
</template>

https://jsfiddle.net/ac89dz1b/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы