Событие Vue click для массивов

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.Проблема в том, что я не могу получить доступ к индексу предметов в myMethod().Я хочу использовать индекс каждого элемента для других целей.Как я могу получить к ним доступ?В настоящее время я могу передавать данные только методу через атрибут id.

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

Answer 2

Вы можете передать индекс в метод следующим образом.

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