无法在Vue.js中动态添加类

Question

尝试了所有这些变化。广泛使用了官方的Vue guides，以及其他堆栈溢出文章和各种教程。我尝试了带引号和不带引号，尝试了数组语法，尝试了几乎所有内容。由于某些原因，即使我可以成功切换data属性，当isLearned为true时，我的css类也不会应用于元素。

这是我的HTML：

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

这是我的JS：

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;
        }
      };
    },
  },
});

Answer 1

您尝试的类绑定的格式不正确。由于它是我们用来绑定的对象，因此必须使用它，例如

Answer 2

这里的几个问题：