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

Question

The Firestore database field (reviewPrivacy in the review collection) is of string type, populated from a Vue form entry (radio) with one of three three possible answers (values): keepFullyPrivate being among them.

I'm trying to only display <h2>The reviewer's identity is private</h2> if the value of review.reviewPrivacy is keepFullyPrivate.

Once this is working, I'll add a v-if-else and then v-else options, displaying different content for each.

My code is below.

There aren't any errors flagged in VSC, but it doesn't matter what the value of review.reviewPrivacy is - the text in the <h2> tags always displays, regardless of whether or not it's equal to keepFullyPrivate

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

Update (additional info):

• I'm using Vue version 3.2.1
• The data from Firestore is fetching correctly. For example, in the same parent as the code above, this line <p> Privacy choice for this review: {{ review.reviewPrivacy }} </p> results in the following text in the DOM: Privacy choice for this review: postAnonPublic, which is the v-else-if condition.

2nd update: code as a full block, as requested in comments:

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

Thanks!

Answer 1

('review.reviewPrivacy', '==', 'keepFullyPrivate') is just a comma separated group of strings, and it evaluates to the last string: 'keepFullyPrivate', so your markup becomes v-if="'keepFullyPrivate'", which is always truthy. Therefore, the div and its h2 are always rendered.

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

review.reviewPrivacy == 'keepFullyPrivate'

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

It's good practice to use triple-equals (===) for a strict comparison.

So the end result should be:

<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

I see two ways to do this:

A) You can create a computed property "showSectionX ()" which does the comparison:

[...]

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

[...]

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

[...]

Instead if X you should of course use a word that describes the purpose of this section.

B) you can do the comparison directly in the v-if:

[...]

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

[...]

I guess the latter is what you were trying to do but used the wrong syntax.