ID div di riferimento vue.js su v-on: fare clic su

Question

Utilizzo di v-on:click Vorrei impostare una variabile con l'ID del div in Vue.JS - come faccio a fare riferimento a questo?

<div id="foo" v-on:click="select">...</div> 

<script> 
    new Vue({ 
     el: '#app', 
     data: { 
     }, 
     methods: { 
      select: function(){ 
       divID = this.id // ?? 
       alert(divID) 
      } 
     } 
    }) 
</script> 

Answer 1

È possibile estendere il vostro gestore di eventi con l'oggetto evento $event. Questo dovrebbe soddisfare le vostre esigenze:

<div id="foo" v-on:click="select($event)">...</div> 

L'evento è trasmesso in javascript:

methods: { 
    select: function(event) { 
     targetId = event.currentTarget.id; 
     console.log(targetId); // returns 'foo' 
    } 
} 

Come accennato nei commenti, $event non è strettamente necessario, quando si utilizza solo questo argomento. Personalmente preferisco scriverlo esplicitamente, quando sto usando il suo valore nel metodo che sto chiamando.

Tuttavia, nessuno vi vieta di scrivere il breve notazione:

<div id="foo" @click="select">...</div>