Как идентифицировать изображение по клику в Vuejs

Question

Я зацикливаюсь и отображаю изображения из базы данных. Каждое изображение имеет уникальный идентификатор, и я хочу получить этот идентификатор при нажатии на изображение.

<div v-for="kudo in catkudo"  style="width:20%;float:left;display:block;height:80px;">
  <div class="kudos_img" style="">
     <img style="width:40%" v-bind:value="kudo.id" v-on:click="select($event)" v-model="kudocat" :src="'/kudosuploads/badges/'+kudo.image" alt="">
     <p>{{ kudo.catname }}</p>
  </div>
</div>

  addKudoPost: function(profile_id){


      var formkudodata = new FormData();

    formkudodata.append('kudodescription', this.kudodescription);

    formkudodata.append('kudouser', this.selected);

    formkudodata.append('kudoimage', this.kudocat);



    axios.post('/addNewsFeedKudoPost', formkudodata)
    .then(response=>{

        if(response.status===200){
           this.posts = response.data.posts; 
           this.birthdays = response.data.birthdays; 
           console.log(this.kudodescription);
           console.log(this.selected);
           $('#post-box')[0].innerHTML = "";
           this.newsfeedPostImages();

       }

   })
    .catch(function (error) {
        console.log(error);
    });
},

Мне нужно получить идентификатор и назначить его переменной при нажатии на изображение.

Answer 1

Ваш метод select должен иметь kudo.id в качестве параметра.

<template>
  <div v-for="kudo in catkudo"  style="width:20%;float:left;display:block;height:80px;">
    <div class="kudos_img" style="">
       <img style="width:40%" :value="kudo.id" @click="select(kudo.id)" v-model="kudocat" :src="'/kudosuploads/badges/'+kudo.image" alt="">
       <p>{{ kudo.catname }}</p>
    </div>
  </div>
</template>

export default {
  methods: {
    select (id) {
      console.log(id, 'is selected');
    }
  }
}

Answer 2

v-on:click="select($event, kudo.id)"

Если у вашего кудо действительно есть идентификатор, то это сработает.И вам нужно изменить select, чтобы принять указанный идентификатор.