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

Question

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

如果 review.reviewPrivacy 的值为 keepFullyPrivate，我将尝试仅显示 <h2>The reviewer's identity is private</h2>。

一旦成功，我将添加 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>

更新（补充信息）：

我使用的是 Vue 版本 3.2.1
Firestore 中的数据正在正确获取。例如，在与上述代码相同的父级中，此行 <p> Privacy choice for this review: {{ review.reviewPrivacy }} </p> 在 DOM 中产生以下文本：本评论的隐私选择：postAnonPublic，这是 v-else-if 条件。

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

<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>

谢谢！

Answer 1

new Vue({
  el: "#app",
  data: {
    review: { reviewPrivacy:0 },
    keepFullyPrivate:0
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div v-if="review.reviewPrivacy == keepFullyPrivate">
   <h2>The reviewer's identity is private</h2>
</div>
<div v-else>
<h2>else part</h2>
</div>
</div>

Answer 2

('review.reviewPrivacy', '==', 'keepFullyPrivate') 只是一组逗号分隔的字符串，它的计算结果为最后一个字符串：'keepFullyPrivate'，因此您的标记变为 v-if="'keepFullyPrivate'"，这始终是真实的。因此，始终呈现 div 及其 h2。

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

review.reviewPrivacy == 'keepFullyPrivate'

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

strict comparison.

最好使用三等号 (===)

所以最终结果应该是：

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

Answer 3

我看到有两种方法可以做到这一点：

A) 您可以创建一个计算的属性 "showSectionX ()" 来进行比较：

[...]

<div v-if="showSectionX"><h2>The reviewer's identity is private</h2></div>

[...]

computed: {
  showSectionX () {
    return this.review.reviewPrivacy === 'keepFullyPrivate'
  }
}

[...]

相反，如果 X 您当然应该使用描述本节目的的词。

B) 你可以直接在 v-if 中进行比较:

[...]

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

[...]

我猜后者是你想做的，但使用了错误的语法。

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

How to conditionally display in Vue, only if Firestore field value matches a specific string value?

conditional-formatting

vue.js

google-cloud-firestore