只有当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的值是多少并不重要——无论它是否等于keepFullyPrivate，<h2>标签中的文本都会始终显示

<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

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

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

Answer 2

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 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>
[...]

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