8
votes

Comment lier un événement à un nœud d'arborescence dans Vuetify?

Je crée actuellement une arborescence avec Vuetify. Ce que j'essaie de faire, c'est que je veux lier un événement chaque fois que je clique sur un nœud. Par exemple, lorsque je clique sur un certain nœud, une boîte de dialogue apparaîtra pour afficher les détails du nœud. Je veux savoir comment déclencher un événement sur clic.

vue.js vuetify.js

2 commentaires

Le problème est que l'événement @update: active ne passe que la KEY du nœud cliqué et non l'objet relatif

voir return-object prop dans la documentation pour changer ce comportement

4 Réponses :

13
votes

Le composant Treeview de Vuetify fournit une étiquette d'emplacement de portée que vous pouvez utiliser pour modifier le contenu affiché pour chaque nœud. Par exemple, pour ouvrir une boîte de dialogue, vous pouvez faire quelque chose comme ceci:

  <v-treeview
    v-model="tree"
    :items="items"
    activatable
    item-key="name">
    <template slot="label" slot-scope="{ item }">
      <a @click="openDialog(item)">{{ item.name }}</a>
    </template>
  </v-treeview>

Vous pouvez ensuite utiliser un dialog et ouvrez-le / modifiez son contenu à l'aide d'une méthode openDialog

2 commentaires

Le seul problème avec cette méthode est que vous devez cliquer exactement sur l'étiquette pour que l'événement de clic se déclenche. J'ai utilisé le slot d'étiquette, mais j'ai trouvé plus tard @update: méthode active qui est parfaite.

Vous pouvez simplement le faire pastebin.com/CTYmYbvJ Il vous suffit de faire vous-même la logique cliquée et l'état de sélection mais cela devrait être facile alors :)

6
votes

methods: {
    test() {console.log('TEST', this.active)},

<v-treeview
    v-model="tree"
    :items="items"
    :active="active"
    activatable
    open-on-click
    @update:active="test"
    >

0 commentaires

0
votes

@ anthonio-achiduzu, Au moins pour Vuetify version 2.3.3, le @update: active est déclenché avant que le this.active ne soit changé, donc le test () affichera un tableau vide dans le code ci-dessus.

0 commentaires

0
votes

Avec Vuetify 2.3.5, j'utilise ceci et c'est ok

updateForm(item)
        {
            if(item.length>0)
                console.log(item[0].name)
        }

Dans les méthodes, j'écris funtion updateForm (mais c'est la console pour tester la valeur):

<v-treeview return-object item-key="id" hoverable activatable selected-color="red"
          @update:active="updateForm" color="warning" :items="categories">
</v-treeview>
      <template slot-scope="{ item }">
                <a @click="updateForm(item)">{{ item.name }}</a>
      </template>

0 commentaires