javascript - 如何根据对象属性向渲染图像添加 "active"类？

Question

我有以下 JSON 文件 - https://ddragon.leagueoflegends.com/cdn/9.14.1/data/en_US/runesReforged.json

如您所见，有 5 个主要 rune 类别，每个类别有 4 个槽，每个槽包含 3 个 rune (第一个槽包含 4 个 rune )。我下面的代码迭代 4 个插槽并渲染每个插槽的所有 rune 的图像。我的最终结果如下所示:

到目前为止一切都很好，除了我想向用户选择的 rune 添加一个事件类。所有选定的 rune 都可以作为名为 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 的属性，它们是 rune 的 id。我必须以某种方式在渲染图像的迭代中插入一个检查，并在 rune 图像的 id 等于任何 perk 属性的情况下向其添加一个“事件”类。问题是我不确定如何实现该检查。

<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>

我建议您创建 rune 检查方法，该方法返回 true 或 false 并以 id 作为参数。

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

那么你的类应该类似于 :class="{inactive: checkRune(rune.id)}