Как добавить «активный» класс к отображаемым изображениям на основе свойств объекта?

Question

Вот сделка, у меня есть следующий файл JSON - https://ddragon.leagueoflegends.com/cdn/9.14.1/data/en_US/runesReforged.json

Как вы можете видеть, есть 5 основных категорий рун, и у каждой категории есть 4 слота, которые содержат 3 руны каждая (кроме первойкоторый содержит 4 руны).Мой код ниже перебирает 4 слота и отображает изображения всех рун на слот.Мой конечный результат выглядит так:

Пока все хорошо, за исключением того, что я хочу добавить активный класс к рунам, выбраннымПользователь.Все выбранные руны могут быть найдены как свойства внутри свойства данных, которое называется match.

data(){
    return {
        match: null
    }
},
methods: {
    primaryPerks(){
        let perksTree = Object.entries(this.$store.state.summonerRunes).find(([key,value]) => value.id === this.match.mainParticipant.stats.perkPrimaryStyle);

        return perksTree[1]
    }
}

Это значение равно нулю, поскольку объект назначается после запроса GET.В этом объекте есть свойства, называемые perk0, perk1, perk2 и perk3, которые являются идентификаторами рун.Мне нужно каким-то образом вставить в мою итерацию проверку, которая отображает изображения, и добавить «активный» класс к изображениям рун, если их идентификатор равен любому из свойств перка.Проблема в том, что я не уверен, как реализовать эту проверку.Любая помощь будет оценена!

<div class="runes">
    <div v-for='runes in this.primaryPerks().slots' class="perks">
        <div v-for='rune in runes.runes' class="perk">
            <img class='inactive' :src="'https://ddragon.leagueoflegends.com/cdn/img/' + rune.icon" alt="">
        </div>
    </div>
</div>

Answer 1

Итак, в какой-то момент match объект выглядит примерно так?

data(){
    return {
        match: {
           perk0: 8112,
           perk1: 8113,
           perk2: 8115,
           perk3: 8122,
        }
    }
},

Если это так, то как это можно условно присоединить класс.

<div class="runes">
    <div v-for='runes in this.primaryPerks().slots' class="perks">
        <div v-for='(rune,index) in runes.runes' class="perk">
            <img :class="{inactive: Object.values(match).find(rune.id)}" :src="'https://ddragon.leagueoflegends.com/cdn/img/' + rune.icon" alt="">
        </div>
    </div>
</div>

Я бы предложилВы делаете метод проверки рун, который возвращает true или false и принимает id в качестве аргумента.

checkRune(id) {
    return Object.values(match).find(id)
}

, тогда ваш класс должен выглядеть как :class="{inactive: checkRune(rune.id)}