vue.js参照div id on v-on：

Question

を使用v-on:clickを使用しています.Vue.JS内のdivのIDを使用して変数を設定したいと思います。

<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

あなたは、イベントオブジェクト$eventを使用してイベントハンドラを拡張できます。それはあなたのニーズに合わせなければならない：

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

イベントはJavaScriptで渡されます。コメントで述べたように

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

、$eventのみこの引数を使用するときに厳密に、必要とされていません。個人的には、私が呼んでいるメソッドでその値を使用しているときに、明示的に書く方が好きです。

しかし、誰も短い表記を書くことからあなたを停止しません：

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