Vue中的条件渲染：仅当Firestore字段值与特定字符串值匹配时显示

Question

Firestore数据库字段（在“review”集合中的reviewPrivacy字段）是字符串类型，由Vue表单输入（单选按钮）填充，有三个可能的答案（值）之一是keepFullyPrivate。

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

评论者的身份是私密的

。

一旦这个工作正常，我将添加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>