Bedingtes Rendering in Vue: Wird nur angezeigt, wenn der Firestore-Feldwert mit einem bestimmten Zeichenfolgenwert übereinstimmt

Question

Firestore-Datenbankfelder (reviewPrivacy-Felder in der Sammlung „review“) sind vom Typ „String“, gefüllt mit Vue-Formulareingaben (Optionsfelder) und mit drei möglichen Antworten (Werten). Eine davon ist

;code>keepFullyPrivate.

Wenn der Wert von review.reviewPrivacy keepFullyPrivate ist, möchte ich zeigen, dass

die Identität des Rezensenten privat ist.

Sobald dies funktioniert, füge ich die Optionen v-else hinzu, um für jede Option unterschiedliche Inhalte anzuzeigen.

Mein Code lautet wie folgt.

In VSC werden keine Fehler gemeldet, aber der Text im Tag

wird immer angezeigt, unabhängig vom Wert von review.reviewPrivacy unabhängig davon, ob es gleich keepFullyPrivate ist.

<div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2> Die Identität des Kommentators ist privat</h2></div>

Update (zusätzliche Informationen):

• Ich verwende die Version Vue 3.2.1
• Die von Firestore erhaltenen Daten sind korrekt. Im selben übergeordneten Element wie der obige Code befindet sich beispielsweise diese Codezeile

  Datenschutzoptionen für diese Bewertung: {{ review.reviewPrivacy }}

  Zeigen Sie den folgenden Text an: Datenschutzoptionen für diesen Kommentar: postAnonPublic, was eine v-else-if-Bedingung ist.

Zweites Update: Wie in den Kommentaren gefordert, machen Sie den Code zu einem vollständigen Block:

<div class="review-detailZ">
<div> <!-- BEGIN Hauptspalte (links) -->
  <p>Datenschutzoptionen für diese Bewertung: {{ review.reviewPrivacy }}</p>
  <br />
   
  <!-- Mit Vue 3.2.1-Version -->
          
   <div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2>Die Identität des Rezensenten ist privat</h2></div>
   <div v-else-if="('review.reviewPrivacy', '==', 'postAnonPublic')"><h2>Anonym – Rezensent: {{ review.userName }}</ h2> ;</div>
   <div v-else><h2>Der Rezensent hat die vollständige Offenlegung gewählt – vollständiger Name {{ review.userFirstName }} {{ review.userLastName }}</h2></div>
   
  <br />
  <p>Vor {{ review.createdAt }} Tagen erstellt</p>
  <br />
</div>

Vielen Dank!

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总是会被渲染出来。

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

review.reviewPrivacy == 'keepFullyPrivate'

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

使用三个等号（===）进行严格比较是一个好的实践。

因此，最终结果应该是：

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