Как забиндить клик внутри компонента вставленного через v-for?

Question

[Илья Куновский]

Есть 5 компонентов, выставленных через v-for, внутри компонентов есть button, мне нужно что бы при нажатии на этот button в переменную присваивался индекс этого button'a
Проблема в том, что через v-for выставлен компонент, а не сам button и я не понимаю, как кнопке присвоить индекс
Примерный код:
App.vue:

<eclipse-item v-for="i in 5" :key="i" ></eclipse-item>

Компонент:

<template>
  <div class="circle__area">
   <span class="circle__text" :class="'circle__text' + circleNumber">{{circleText[circleNumber]}}</span>
   <button class="circle__button">
    <img class="circleImage" :class="'circleImage' + circleNumber" :src="require('@/assets/img/eclipse' + circleNumber + '.png')">
   </button>
  </div>
</template>

Заранее спасибо за помощь!

Answer 1

[Антон Антон]

В компонент передать индекс через проп, при нажатии на кнопку эмитить этот индекс в событии. В родительском компоненте - ловить. как-то так: https://jsfiddle.net/y5981mwc/

Comments

[Илья Куновский]

Я попытался сделать как вы сказали, но особо не вышло, не могли бы поправить?
Родитель:

<eclipse-item v-for="i in 5" :key="i" :val="i" @set-current="val => c = val" :circleNumber="i - 1" :class="'circle__area' + (i - 1)"></eclipse-item>
<div class="gif-container">
 <img :src="'./assets/img/lazer'+val+'.gif'">
</div>

Компонент:

<button class="circle__button" @click="$emit('set-current', val)">

export default {
  props: ['val'],
  data() {
    return {
      c: null
    }
  }
}

[Антон Антон]

data() {
return {
c: null
}
}

должно быть в родительском компоненте, а не в eclipse-item

[Илья Куновский]

Антон Антон, исправил, но говорит "val is not defined"
его нужно как то объявлять в родителе, помимо того, что я скинул выше?
upd: на всякий попробовал указать проп val в родителе, консоль ругаться перестала, но val все равно определяется как undef

Answer 2

[WapSter]

1. В eclipse-item передавай props с её индексом, и передавай этот индекс в метод события, который должен висеть на button.
   
   
   
2. В eclipse-item можно создать slot для button и вставлять button непосредственна в родительский компонент
   

   <eclipse-item v-for="i in 5" :key="i" ><button @click="myMethod(i)">Что-то там</button></eclipse-item>