<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 会告诉我其内容,因此我将内容绑定(bind)到每个 div 的 id。问题是我无法访问 myMethod()
中项目的索引。我想将每个项目的索引用于其他目的。我怎样才能访问它们?目前我只能通过 id 属性向方法传递数据。
最佳答案
I want to use the index of each item for other purposes. How can I access them?
很简单,直接传递即可,如下:
<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>
关于javascript - Vue 数组的点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52827325/