S
S
Stim72020-11-05 14:13:24
Vue.js
Stim7, 2020-11-05 14:13:24

V-slot: how to skip first element?

Hello everyone, I use slots when building a tree (the "template" object will be added dynamically and as much as necessary), the framework is vuetify and the component for building a tree is v-treeview.
The problem is that the slot adds buttons (underlined in the screenshot) to the folder in which the templates are located and these buttons are not needed on the folder itself. How to remove them?

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",
          },
        ],
      },
    ],

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2020-11-05
@Stim7

buttons on the folder itself are not needed

Treeview slots have a parameter indicating whether the current treeview element is a leaf (i.e., does not contain child elements). Use its value to conditionally render slot content:
<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/

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question