web-dev-qa-db-fra.com

Comment obtenir un élément cliqué dans vue

J'essaie de faire quelque chose de base mais je ne peux pas comprendre.

j'ai une liste déroulante:

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>{{selectedItem}}</span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content" v-model="selectedItem">
      <a class="dropdown-item" v-for="item in items">
        {{item.name}}
      </a>
    </div>
  </div>
</div>


var app = new Vue({
  el: '#app',
  data: {
    selectedItem: null,
     items: [
     {
         name: "Dropdown Item"
     },
     {
         name: "Dropdown Item 2"
     },
     {
         name: "Dropdown Item 3"
     }
    ]
  },
});

Fondamentalement, j'essaie de le faire lorsque je clique sur l'élément de liste déroulante, ce sera {{selectedItem}} pour cela, j'ai essayé d'utiliser v-model dans mon enveloppe de menu, mais rien ne s'est produit.

javascriptvue.jsvuejs2
6
user3348410

Vous ne pouvez pas utiliser v-model avec div ici.

Au lieu de cela, vous devez utiliser v-click pour appeler une méthode afin de mettre à jour la valeur selectedItem et gérer l'action bascule.

Encore une chose, lorsque vous utilisez v-for tu aurais dû key id qui est recommandé par Vuejs.

Juste ébauche de mise en œuvre:

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>{{selectedItem}}</span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a class="dropdown-item" v-for="item in items" :key="item.id" v-click="handleSelectItem(item)">
        {{item.name}}
      </a>
    </div>
  </div>
</div>


var app = new Vue({
  el: '#app',
  data: {
    selectedItem: null,
     items: [
     {
         id: 1,
         name: "Dropdown Item"
     },
     {
         id: 2,
         name: "Dropdown Item 2"
     },
     {
         id: 3,
         name: "Dropdown Item 3"
     }
    ]
  },
  method: {
     handleSelectItem(item){
       this.selectedItem = item.name;
       // you can also handle toggle action here manually to open and close dropdown
     }
  }
});
1
Hoang Tran Son

Nous pouvons également utiliser l'abréviation de la syntaxe ES6 via les méthodes:

... template
<a @click="expand" data-toggle="collapse" aria-expanded="false">{{ menuItem.title }}</a>
... more template


... script section
methods: {
    expand({ target }) {
      console.log('this is the element i clicked: ', target);
    }
  }
... more script code
1
mEnE

merci je le fais avec votre chemin un peu différent:

<a class="dropdown-item" v-model="selectedItem" v-for="item in items" @click="selected(item)">
        {{item.name}}
      </a>


var app = new Vue({
  el: '#app',
  data: {
    selectedItem: null,
     items: [
     {
         name: "Dropdown Item"
     },
     {
         name: "Dropdown Item 2"
     },
     {
         name: "Dropdown Item 3"
     }
    ]
    },
    methods: {
      selected(element) {
        this.selectedItem = element.name
      }
    }
  });
1
user3348410

vous pouvez passer l'événement à la fonction de gestionnaire et y accéder en event.target

<div class="dropdown-menu" id="dropdown-menu" role="menu">
 <div class="dropdown-content" v-model="selectedItem">
  <a class="dropdown-item" v-for="item in items" @click="HandlerFunction">
    {{item.name}}
  </a>
 </div>
</div>

var app = new Vue({
 el: '#app',
 data: {
  selectedItem: null,
  items: [
   {
     name: "Dropdown Item"
   },
   {
     name: "Dropdown Item 2"
   },
   {
     name: "Dropdown Item 3"
   }
  ]
 },
 methods: {
  HandlerFunction(event){
   console.log(event.target)
  }
 }
});
0
Kumar Adarsh