Vue js image selectable

Question

私はimgタグを選択可能にしたいと考えています。私はそれが選択されているか選択解除されている場合、ブール値true/falseを取得することを意味します。何か案は？

<h2 class="headline mb-2 text-xs-center">Choose your hero:</h2> 
<v-layout row wrap primary-title v-for="hero in heroes" :key="hero.id"> 
    <v-flex xs6> 
    <v-avatar size="80px" class="grey lighten-1"> 
     <img v-bind:src="`${hero.href}`" alt="avatar"> 
    </v-avatar> 
    </v-flex> 
    <v-flex xs6 class="text-xs-right"> 
    <v-subheader>{{hero.name}}€</v-subheader> 
    </v-flex> 
</v-layout> 
</v-card> 
</template> 

<script> 
    export default { 

     data:() => ({ 

      bases: [{ 
       id: 1, 
       name: "Spiderman", 
       href: "../../static/spiderman.jpg" 
      }, { 
       id: 2, 
       name: "Batman", 
       href: "../../static/batman.jpg" 
      }] 
     }) 
    } 
</script> 

Answer 1

これは、あなたがそれを

<script> 
    export default { 
     data(){ 
      return { 
       //... 
      } 
     }, 
     methods: { 
      selectHero(hero){ 
       this.$set(hero, 'selected', (hero.selected ? false:true)) //!hero.selected 
      } 
     } 
    } 
</script> 

テンプレートで

<img :src="hero.href" alt="avatar" :class="{selected: hero.selected}" @click="selectHero(hero)"> 

と一つだけのアイテム

<script> 
    export default { 
     data(){ 
      return { 
       //... 
       selectedHero: {} 
      } 
     }, 
     methods: { 
      getSelectedHero(){ 
       return this.selectedHero; 
      } 
     } 
    } 
</script> 

<img :src="hero.href" alt="avatar" :class="{selected: selectedHero.id == hero.id}" @click="selectedHero = hero"> 

<style> 
    img.selected{ 
     border: solid 2px green; 
     /* and other styles ... */ 
    } 
</style>