javascript - 我想让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
          }
     }
}

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

给我一​​些好的解决方案。

Answer 1

您需要将 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>