Я хочу сделать изображение кликабельным в 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

Вам необходимо зарегистрировать 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')
    }
  }
})