Я хочу использовать изображения почти как флажки, и у меня это работает, но первый выбранный элемент не добавляет к нему класс
<div v-for="tenant in shops" :key="tenant.id">
<div class="" style="position: relative;">
<label :for="tenant.id+'-input'">
<img @click="clickShop(tenant.id)"
:id="tenant.id"
:src="tenant.img_url"
class="tenant-img"
:class="(isShopSelected(tenant.id))?'selected':''"
style="height: 100px; width: 150px; margin: 10px;"/>
<div :id="tenant.id+'-icon'" style="color: green; "
class="bottom-right fa fa-check-circle"></div>
</label>
</div>
</div>
И бит сценария
export default {
props: ['form_id'],
data() {
return {
shops: [],
selected_shops: [],
categories: [],
selected: ''
}
},
methods: {
clickShop(id) {
let choosen = document.getElementById(id + "-img");
let icon = document.getElementById(id + "-icon");
let input = document.getElementById(id + "-input");
console.log('id is:' + this.selected_shops.indexOf(id));
// check is in array and remove if it is
if (this.selected_shops.indexOf(id) >= 0) {
console.log('removed was:' + this.selected_shops.indexOf(id));
this.selected_shops.splice(this.selected_shops.indexOf(id), 1);
} else {
this.selected_shops.push(id);
}
console.log(this.selected_shops);
// remove shop if
},
isShopSelected(id) {
// console.log(this.selected_shops);
let result = this.selected_shops.indexOf(id) > 0;
if(result) {
console.log(id);
}
// console.log('is shop selected' + id + ' ' + result);
return result;
}
}
}