Below is a link to the JSON file I am working with -
The JSON file consists of 5 main categories of runes, with each category containing 4 slots. Each slot has 3 runes, except for the first slot which has 4 runes. The code snippet below loops through the slots and displays images of all the runes in each slot. The final output appears as shown in this image:
https://i.sstatic.net/L8h3Y.png
However, I am facing an issue where I need to add an 'active' class to the runes that have been selected by the user. The selected runes are stored as properties within a data object named 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]
}
}
The value of match is currently null as it is populated post a GET request. Within this object, there are properties named perk0, perk1, perk2, and perk3 which hold the IDs of the selected runes. I need to modify my iteration logic to add an 'active' class to the images of those runes whose IDs match any of the perk properties. However, I'm unsure about how to implement this check.
<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>