如何在 vue.js 2 中的 v-for 迴圈中使用 v-if

Question

我有這個程式碼設定

<div v-for="person in persons">
    <div v-if="person.status == 'public'" :key="person.id">
        Hi,my name is {{person.name}}
    </div>
    <div v-else :key="person.id">
        This person is private
    </div>
</div>

person 物件中的 status 屬性的所有值都是「public」！

但在上面的程式碼片段中，繼續運行的不是 if 區塊，而是 else 區塊。

如果我像這樣重寫程式碼：

<div v-for="person in persons" :key="person.id">
    <div v-if="person.status == 'public'">
        Hi,my name is {{person.name}}
    </div>
    <div v-else>
        This person is private
    </div>
</div>

然後就可以正常工作了。

第一個片段有什麼問題？

看起來「key」屬性在其中發揮了作用。是我使用方式不對嗎？為什麼會影響輸出？

其中哪一個是在「for」迴圈內寫「if」語句最正確的方法？

我之前一直在程式碼中的其他循環中使用第一種方法，直到今天才出現問題。我是否需要將它們全部更新為類似於第二種方法以避免出現這樣的奇怪行為？

Answer 1

來自 vue v-for 與 v-if

您正確使用了 v-for 和 v-if。問題在於 :key 被放在條件區塊上。

無論哪種方式，某些內容都會在 div 中呈現，您有兩種可能的結果，並且關鍵應該在 v-for 線上。您不應有條件地呈現 :key 屬性。

// 1
<div>
   <div>
      Hi,my name is john
   </div>
</div>

// 2
<div>
  <div>
     This person is private
  </div>
</div>