Rendu conditionnel dans Vue : afficher uniquement si la valeur du champ Firestore correspond à une valeur de chaîne spécifique

Question

Les champs de la base de données Firestore (champs reviewPrivacy dans la collection "review") sont de type chaîne, remplis par les entrées du formulaire Vue (boutons radio), avec trois réponses possibles (valeurs) L'une est < ;code>keepFullyPrivate.

Si la valeur de review.reviewPrivacy est keepFullyPrivate, je souhaite montrer que

l'identité du réviseur est privée< h2>.

Une fois que cela fonctionnera, j'ajouterai les options v-if-else et v-else pour afficher un contenu différent pour chaque option.

Mon code est le suivant.

Aucune erreur n'est signalée dans VSC, mais le texte de la balise

apparaît toujours, quelle que soit la valeur de review.reviewPrivacy qu'il soit égal ou non à keepFullyPrivate.

<div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2> L'identité du commentateur est privée</h2></div>

Mise à jour (informations supplémentaires) :

• J'utilise la version Vue 3.2.1
• Les données obtenues depuis Firestore sont correctes. Par exemple, dans le même parent que le code ci-dessus, cette ligne de code

  Choix de confidentialité pour cette révision : {{ review.reviewPrivacy }}

  Affichez le texte suivant : Choix de confidentialité pour ce commentaire : postAnonPublic, qui est une condition v-else-if ≪/li>

Deuxième mise à jour : Comme demandé dans les commentaires, faites du code un bloc complet :

<div class="review-detailZ">
<div> <!-- BEGIN colonne principale (gauche) -->
  <p>Choix de confidentialité pour cet avis : {{ review.reviewPrivacy }}</p>
  <br />
   
  <!-- Utilisation de la version Vue 3.2.1 -->
          
   <div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2>L'identité de l'évaluateur est privée</h2></div>
   <div v-else-if="('review.reviewPrivacy', '==', 'postAnonPublic')"><h2>Anonyme - Réviseur : {{ review.userName }}</ h2> ;</div>
   <div v-else><h2>L'évaluateur a choisi la divulgation complète - nom complet {{ review.userFirstName }} {{ review.userLastName }}</h2></div>
   
  <br />
  <p>Créé il y a {{ review.createdAt }} jours</p>
  <br />
</div>

Merci !

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')只是一组以逗号分隔的字符串，并且它的值为最后一个字符串：'keepFullyPrivate'，所以你的标记变成了v-if="'keepFullyPrivate'"，它总是为真。因此，div及其h2 sera toujours rendu.

L'expression correcte pour comparaison review.reviewPrivacy和'keepFullyPrivate' est :

review.reviewPrivacy == 'keepFullyPrivate'

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

C'est une bonne pratique de faire des ===comparaisons strictes en utilisant trois signes égaux ().

Le résultat final devrait donc être :

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