I have exhausted all possible variations of this issue. I meticulously followed the official Vue guides, consulted numerous stack overflow posts, and went through various tutorials. I experimented with different syntaxes, quotations, array structures, and everything in between. Despite successfully toggling the data property, my CSS class fails to be applied to elements when 'isLearned' is true.
Below is the snippet of HTML code:
<li
v-for="(flashcard, index) in flashcards"
v-bind:class="{learned: isLearned, flashcard}"
@click="toggleSide(flashcard)">
<p>{{flashcard.isFlipped ? flashcard.phrase : flashcard.definition}}</p>
<button @click="learnedCard(flashcard, index)">Learned</button>
</li>
And here is the JavaScript code:
new Vue({
el: "#esl-flashcards",
data: {
flashcards: flashcards,
inputPhrase: '',
inputDef: '',
isLearned: false,
},
methods: {
learnedCard: function(flashcard, index) {
for (let i = 0; i < flashcards.length; i += 1){
if (i === index) {
flashcards[i].isLearned = !flashcards[i].isLearned;
}
};
},
},
});