数组的Vue单击事件答案

【问题标题】：Vue click event for arrays数组的Vue单击事件
【发布时间】：2019-03-20 12:09:25
【问题描述】：

<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 属性向方法传递数据。

【问题讨论】：

您可以将迭代的属性作为参数传递给您的方法，例如myMethod(n, index)

标签： javascript vue.js vuejs2

【解决方案1】：

我想将每个项目的索引用于其他目的。我怎样才能访问它们？

很简单，只是传递一下，像这样：

<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>

【讨论】：

【解决方案2】：

您可以像这样将索引传递给方法。

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

【讨论】：