我想让图像在vuejs中可点击

Question

当我单击图像时，我想向它添加一些类。我正在按照以下方式操作：-

<div class="thumbnail">
    <img 
        :image_id="image.id" 
        :src="'/storage/images/'+image.name"
        @click="select(image)"
        :class="{
           'selected': image.selected
        }"
    />
</div>


select(image) {
     for (let i = 0; i < this.imageData.length; i++) {
         if(image.id == this.imageData[i].id) {
             this.imageData[i].selected = true
          }
     }
}

当我单击它时不会调用该方法。我通过在console.log()方法中添加select()进行了检查。

建议我一些好的解决方案。

Answer 1

请定义选择作为功能。

Answer 2

您需要注册select作为方法

<script>
export default {
 methods: {
   select(image) {
     for (let i = 0; i < this.imageData.length; i++) {
         if(image.id == this.imageData[i].id) {
             this.imageData[i].selected = true
          }
     }
   }
 }
}
</script>