Conditional rendering in Vue: Show only if Firestore field value matches a specific string value

Question

Firestore database fields (reviewPrivacy fields in the "review" collection) are of type string, populated by Vue form inputs (radio buttons), with three possible answers (values) One is keepFullyPrivate.

If the value of review.reviewPrivacy is keepFullyPrivate, I want to show that

the reviewer's identity is private< /h2>.

Once this is working, I will add the v-if-else and v-else options to display different content for each option.

My code is as follows.

No errors are flagged in VSC, but the text in the

tag always appears no matter what the value of review.reviewPrivacy , regardless of whether it is equal to keepFullyPrivate.

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

Update (additional information):

• I am using Vue 3.2.1 version
• The data obtained from Firestore is correct. For example, in the same parent as the code above, this line of code

  Privacy choices for this review: {{ review.reviewPrivacy }}

  in the DOM Display the following text: Privacy choices for this comment: postAnonPublic, which is a v-else-if condition.

Second update: As requested in the comments, make the code a complete block:

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

Thank you!

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>评论者的身份是私密的</h2>
</div>
<div v-else>
<h2>其他部分</h2>
</div>
</div>

Answer 2

('review.reviewPrivacy', '==', 'keepFullyPrivate') is just a set of comma-separated strings, and its value is the last string: 'keepFullyPrivate ', so your tag becomes v-if="'keepFullyPrivate'", which is always true. Therefore, div and its h2 will always be rendered.

The correct expression to compare review.reviewPrivacy and 'keepFullyPrivate' is:

review.reviewPrivacy == 'keepFullyPrivate'

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

It is a good practice to use three equal signs (====) for strict comparison .

Therefore, the final result should be:

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