Я ищу, чтобы сделать тег 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>
Это простой пример того, что вы можете сделать его доступным
<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>