Vue의 조건부 렌더링: Firestore 필드 값이 특정 문자열 값과 일치하는 경우에만 표시

Question

<p>Firestore 데이터베이스 필드("review" 컬렉션의 <code>reviewPrivacy</code> 필드)는 문자열 유형이며 Vue 양식 입력(라디오 버튼)으로 채워지며 세 가지 가능한 답변(값)이 있습니다. 하나는 < ;코드>keepFullyPrivate. </p> <p><code>review.reviewPrivacy</code> 값이 <code>keepFullyPrivate</code>인 경우, 리뷰어의 신원은 비공개</ h2></code>. </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>
• Firestore에서 얻은 데이터가 정확합니다. 예를 들어, 위의 코드와 동일한 상위 코드에서 이 리뷰에 대한 <code><p>Privacy choice: {{ review.reviewPrivacy }}</p></code> 다음 텍스트를 표시합니다: <em>이 댓글에 대한 개인 정보 보호 선택: postAnonPublic</em> 이는 <code>v-else-if</code> 조건입니다. </li> </ul> <p>두 번째 업데이트: 주석에서 요청한 대로 코드를 완전한 블록으로 만듭니다. </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>리뷰어의 신원은 비공개입니다</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 />

Answer 1

으아악 으아악

Answer 2

('review.reviewPrivacy', '==', 'keepFullyPrivate')只是一组以逗号分隔的字符串，并且它的值为最后一个字符串：'keepFullyPrivate'，所以你的标记变成了v-if="'keepFullyPrivate'"，它总是为真。因此，div及其h2 항상 렌더링됩니다.

비교를 위한 올바른 표현 review.reviewPrivacy和'keepFullyPrivate'은:

으아악

등호 3개(===)를 사용하여 엄격한 비교를 하는 것이 좋습니다.

최종 결과는 다음과 같습니다.

으아악