我想让图像在 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>

Answer 2

这里是单个图像的解决方案：https://jsfiddle.net/vqzyx6hn/

<div id="app">
 <div class="thumbnail">
    <img 
        :image_id="image.id" 
        src="http://farm1.static.flickr.com/47/139324914_374969bd81.jpg"
        @click="select(image)"
        :class="{
           'selected': image.selected
        }"
    />
</div>
</div>
new Vue({
  el: "#app",
  data: {
    image : {
        id: 1,
      selected: false,

    }
  },
  methods: {
    select: function(image){
    alert('it is working')
    }
  }
})