Vue での条件付きレンダリング: Firestore フィールド値が特定の文字列値と一致する場合にのみ表示します

Question

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

Answer 1

リーリー リーリー

Answer 2

('review.reviewPrivacy', '==', 'keepFullyPrivate') は単なるカンマ区切りの文字列のセットであり、その値は最後の文字列です: 'keepFullyPrivate ' の場合、タグは v-if="'keepFullyPrivate'" になり、これは常に true になります。したがって、div とその h2 は常にレンダリングされます。

review.reviewPrivacy と 'keepFullyPrivate' を比較するための正しい式は次のとおりです:

リーリー

厳密な比較 には 3 つの等号 (====) を使用することをお勧めします。

したがって、最終結果は次のようになります:

リーリー