Vue での条件付きレンダリング: Firestore フィールド値が特定の文字列値と一致する場合にのみ表示します
<p>Firestore データベース フィールド (「レビュー」コレクションの <code>reviewPrivacy</code> フィールド) は文字列型で、Vue フォーム入力 (ラジオ ボタン) によって設定され、3 つの可能な答え (値) が設定されます。1 つは < ;code>keepFullyPrivate</code>。 </p>
<p><code>review.reviewPrivacy</code> の値が <code>keepFullyPrivate</code> の場合、<code><h2>レビュー担当者の ID が非公開であることを示したいです< / h2>。 </p>
<p>これが機能したら、<code>v-if-else</code> および <code>v-else</code> オプションを追加して、オプションごとに異なるコンテンツを表示します。 </p>
<p>私のコードは次のとおりです。 </p>
<p>VSC ではエラーのフラグは立てられませんが、<code><h2></code> タグ内のテキストは、<code>review.reviewPrivacy</code> の値に関係なく常に表示されます。 <code>keepFullyPrivate</code> と等しいかどうかは関係ありません。 </p>
<pre class="brush:php;toolbar:false;"><div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2>コメント投稿者の身元は非公開です</h2></div></pre>
<p>更新 (追加情報): </p>
<li>Vue 3.2.1 バージョンを使用しています</li>
<li>Firestore から取得したデータは正しいです。たとえば、上記のコードと同じ親で、DOM 内の次のコード行 <code><p>このレビューのプライバシーの選択: {{ review.reviewPrivacy }}</p></code>次のテキストを表示します: <em>このコメントのプライバシーの選択: postAnonPublic</em>、これは <code>v-else-if</code> 条件です。 </li>
</ul>
<p> 2 番目の更新: コメントでのリクエストに応じて、コードを完全なブロックにします: </p>
<pre class="brush:php;toolbar:false;"><div class="review-detailZ">
<div> <!-- BEGIN メイン (左側) 列 -->
<p>このレビューのプライバシーの選択: {{ review.reviewPrivacy }}</p>
<br />
<!-- Vue 3.2.1 バージョンを使用する -->
<div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2>レビュー担当者の ID は非公開です</h2></div>
<div v-else-if="('review.reviewPrivacy', '==', 'postAnonPublic')"><h2>匿名 - 査読者: {{ review.userName }}</ h2> ;</div>
<div v-else><h2>査読者は完全な開示を選択しました - フルネーム {{ review.userFirstName }} {{ review.userLastName }}</h2></div>
<br />
<p>{{ review.createdAt }} 日前に作成されました</p>
<br />
</div></pre>
<p>ありがとうございます! </p>
