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
          }
     }
}

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

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

标签： javascriptvue.jslaravel-mix

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>