Question

我循环并显示数据库中的图像。每个图像都有唯一的ID，我想在单击图像时获取ID。

<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);
    });
},

单击图像时，我需要获取ID并将其分配给变量。

Answer 1

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

如果您的工道确实有一个ID，那么它将起作用。并且您需要修改选择以接受所述ID。

Answer 2

您的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');
    }
  }
}

如何在Vuejs中点击图片ID

2 个答案: