Vue.js内の複数の要素へのイベントのバインド

Question

コンポーネントを使用せずにHTML内の複数の要素にイベントをバインドすることは可能ですか？

例：

<ul> 
    <li> 
    <li> 
    <li> 
    <li> 
</ul> 

だから私はすべてのそれらの<li>要素にクリックイベントをバインドすることができます。はいの場合、どうですか？

Answer 1

イベント委任を使用できます。イベントがバブルアップするので、ul要素にクリックハンドラを置くことができ、含まれているいずれかをクリックすると起動します。lieventオブジェクトでは、targetはイベントがトリガされた要素を示し、currentTargetはハンドラがアタッチされている要素を示します。

new Vue({ 
 
    el: 'body', 
 
    methods: { 
 
    something: function(event) { 
 
     console.log('Clicked:', event.target.textContent); 
 
     console.log('Binding is on:', event.currentTarget); 
 
    } 
 
    } 
 
});

ul { 
 
    cursor: pointer; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> 
 
<ul @click="something"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
</ul>