时间戳

首页 > 解决方案 > 仅当 Firestore 字段值与特定字符串值匹配时，如何在 Vue 中有条件地显示？

vue.js - 仅当 Firestore 字段值与特定字符串值匹配时，如何在 Vue 中有条件地显示？

问题描述

Firestore 数据库字段（reviewPrivacy在review集合中）是字符串类型，从 Vue 表单条目（单选）填充三个可能的答案（值）之一：keepFullyPrivate在其中。

我试图仅<h2>The reviewer's identity is private</h2>在值为review.reviewPrivacyis时显示keepFullyPrivate。

一旦这工作，我将添加一个v-if-else然后v-else选项，为每个显示不同的内容。

我的代码如下。

VSC 中没有标记任何错误，但值是什么并不重要 review.reviewPrivacy- 标签中的文本<h2>始终显示，无论它是否等于keepFullyPrivate

<div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2>The reviewer's identity is private</h2></div>

更新（附加信息）：

第二次更新：代码作为一个完整的块，如评论中所要求的：

<div class="review-detailZ">
<div> <!-- BEGIN main (left-hand) column -->
  <p> Privacy choice for this review: {{ review.reviewPrivacy }} </p>
  <br />
   
  <!-- Using Vue version 3.2.1 -->
          
   <div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2>The reviewer's identity is private</h2></div>
   <div v-else-if="('review.reviewPrivacy', '==', 'postAnonPublic')"><h2>Incognito - review by{{ review.userName }}</h2></div> 
   <div v-else><h2>Reviewer chose to be fully public - full name is {{ review.userFirstName }} {{ review.userLastName }}</h2></div>
   
  <br />
  <p>Created {{ review.createdAt }} days ago</p>
  <br />
</div>

谢谢！

标签： vue.jsgoogle-cloud-firestoreconditional-formatting

解决方案

('review.reviewPrivacy', '==', 'keepFullyPrivate')只是一个逗号分隔的字符串组，它计算为最后一个字符串：'keepFullyPrivate'，因此您的标记变为v-if="'keepFullyPrivate'"，这始终是真实的。因此， thediv和 itsh2总是被渲染。

review.reviewPrivacy要比较的正确表达式'keepFullyPrivate'是：

review.reviewPrivacy == 'keepFullyPrivate'

// or even better:
review.reviewPrivacy === 'keepFullyPrivate'

使用三等号 ( ===) 进行严格比较是一种很好的做法。

所以最终结果应该是：

<div v-if="review.reviewPrivacy === 'keepFullyPrivate'"><h2>The reviewer's identity is private</h2></div>

推荐阅读