陣列的Vue單擊事件

Question

<div v-for="(n, index) in items" :id="n" @click="myMethod($event)">{{n}}</div>

數組就像

items: [mouse, bull, tiger, rabbit, pig, cat, dog, horse]

方法就像

myMethod: function(event){
    console.log(event.target.id);
}

我想單擊每個div，該div會告訴我其內容，因此我將內容綁定到每個div的ID。 問題是我無法訪問myMethod()各項的索引。 我想將每個項目的索引用於其他目的。 如何訪問它們？ 目前，我只能通過id屬性將數據傳遞給方法。

Answer 1

您可以將索引傳遞給這樣的方法。

<div v-for="(n, index) in items" :id="n" @click="myMethod($event, index)">{{n}}</div>

Answer 2

我想將每個項目的索引用於其他目的。 如何訪問它們？

這很簡單，只需傳遞它，就像這樣：

<div v-for="(n, index) in items" :id="n" @click="myMethod(index)">{{n}}</div>

這是CodeSandbox上的一個有效示例： https ://codesandbox.io/s/m363rl73oy

另一個演示：

 var app = new Vue({ el: '#app', data: { items: ['mouse', 'bull', 'tiger', 'rabbit', 'pig', 'cat', 'dog', 'horse'] }, methods: { handleClick: function(index) { alert(index) } } }) 

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <div id="app"> <div @click="handleClick(index)" v-for="(item, index) in items" :key="index">{{item}}</div> </div> 

如果您想將數據傳遞給方法 ，只需像這樣傳遞

 var app = new Vue({ el: '#app', data: { items: ['mouse', 'bull', 'tiger', 'rabbit', 'pig', 'cat', 'dog', 'horse'] }, methods: { handleClick: function(item) { alert(item) } } }) 

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <div id="app"> <div @click="handleClick(item)" v-for="(item, index) in items" :key="index">{{item}}</div> </div>