無法在 Vue.js 中動態添加 class

Question

嘗試了所有變體。 廣泛使用官方Vue 指南，以及其他堆棧溢出帖子和各種教程。 我試過帶引號和不帶引號，我試過數組語法，我試過幾乎所有東西。 由於某種原因，即使我可以成功切換數據屬性，當 isLearned 為真時，我的 css class 也不會應用於元素。

這是我的 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

這里有幾個問題：

isLearned實際上是每個抽認flashcard object 的一個屬性。 所以，當你這樣做時：

flashcards[i].isLearned = !flashcards[i].isLearned;

您實際上是在更新該屬性，但是您正在檢查 static 數據isLearned在 class 中的屬性更改，例如

v-bind:class="{learned: isLearned, flashcard}"

因此，您根本看不到任何 class 變化。 你只需要這樣稱呼它：

v-bind:class="{learned: flashcard.isLearned, flashcard}"

---

也在這里：

for (let i = 0; i < flashcards.length; i += 1){
    if (i === index) {
      flashcards[i].isLearned = !flashcards[i].isLearned;
    }
};

您正在直接調用flashcards ，這在 vie 中將始終未定義。 你需要這樣稱呼它this.flashcards 。 但是由於您已經將數組的索引傳遞給learnedCard()方法，因此您不需要在此處循環。 您可以簡單地使用.find()方法在幾行中實現相同的結果，例如：

 learnedCard: function(flashcard, index) {
      var card = this.flashcards.find((f,i) => i===index)
      card.isLearned = !card.isLearned;
 },

工作演示：

 new Vue({ el: "#esl-flashcards", data: { flashcards: Array.from({length:4}, (_, i) => ({text: `Item ${i+1}`, isLearned: false})), inputPhrase: '', inputDef: '', isLearned: false, }, methods: { learnedCard: function(flashcard, index) { var card = this.flashcards.find((f,i) => i===index) card.isLearned =.card;isLearned, }, }; });

 li.learned {background-color:skyblue;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="esl-flashcards"> <ul> <li v-for="(flashcard, index) in flashcards" v-bind:class="{learned: flashcard.isLearned, flashcard}"> <p>{{flashcard.text}}</p> <button @click="learnedCard(flashcard, index)">Learned</button> </li> </ul> </div>