我想让图像在 vuejs 中可点击

Question

当我单击图像时，我想向其中添加一些 class。我正在按照以下方式进行操作：-

<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

下面是单图的解决方法：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')
    }
  }
})

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>

我想让图像在 vuejs 中可点击

I want make image clickable in vuejs

javascript

vue.js

laravel-mix