Vue中的條件渲染：僅當Firestore欄位值與特定字串值相符時顯示

Question

Firestore資料庫欄位（在「review」集合中的reviewPrivacy欄位）是字串類型，由Vue表單輸入（單選按鈕）填充，有三個可能的答案（值）之一是keepFullyPrivate。

如果review.reviewPrivacy的值是keepFullyPrivate，我想要顯示

評論者的身分是私密的< /h2>。

一旦這個工作正常，我將添加v-if-else和v-else選項，為每個選項顯示不同的內容。

我的程式碼如下。

在VSC中沒有標記任何錯誤，但無論review.reviewPrivacy的值是什麼，

標籤中的文字總是顯示，無論它是否等於keepFullyPrivate。

<div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2>評論者的身分是私密的</h2></div>

更新（附加資訊）：

• 我使用的是Vue 3.2.1版
• 從Firestore取得的資料是正確的。例如，在與上面的程式碼相同的父級中，這行程式碼

  此評論的隱私選擇：{{ review.reviewPrivacy }}

  在DOM中顯示以下文字：此評論的隱私選擇：postAnonPublic，這是v-else-if條件。

第二次更新：依照評論中的要求，將程式碼作為完整的區塊：

<div class="review-detailZ">
<div> <!-- BEGIN main (left-hand) column -->
  <p>此評論的隱私選擇：{{ review.reviewPrivacy }}</p>
  <br />
   
  <!-- 使用Vue 3.2.1版 -->
          
   <div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2>評論者的身分是私密的</h2></div>
   <div v-else-if="('review.reviewPrivacy', '==', 'postAnonPublic')"><h2>匿名- 評論者：{{ review.userName }}</ h2></div>
   <div v-else><h2>評論者選擇完全公開 - 全名為{{ review.userFirstName }} {{ review.userLastName }}</h2></div>
   
  <br />
  <p>創建於{{ review.createdAt }}天前</p>
  <br />
</div>

謝謝！

Answer 1

雷雷 雷雷

Answer 2

('review.reviewPrivacy', '==', 'keepFullyPrivate')只是一組以逗號分隔的字串，並且它的值為最後一個字串：'keepFullyPrivate '，所以你的標記變成了v-if="'keepFullyPrivate'"，它總是為真。因此，div及其h2總是會被渲染出來。

正確的比較review.reviewPrivacy和'keepFullyPrivate'的表達式是：

review.reviewPrivacy == 'keepFullyPrivate'

// 或者更好的写法：
review.reviewPrivacy === 'keepFullyPrivate'

使用三個等號（===）進行嚴格比較是一個好的實踐。

因此，最終結果應該是：

<div v-if="review.reviewPrivacy === 'keepFullyPrivate'"><h2>评论者的身份是私密的</h2></div>