Paparan bersyarat dalam Vue: Tunjukkan hanya jika nilai medan Firestore sepadan dengan nilai rentetan tertentu

Question

Medan pangkalan data Firestore (ulasanPrivasi medan dalam koleksi "ulasan") adalah daripada jenis rentetan, diisi oleh input borang Vue (butang radio), dengan tiga kemungkinan jawapan (nilai) Satu ialah < ;kod>keepFullyPrivate.

Jika nilai review.reviewPrivacy ialah keepFullyPrivate, saya ingin menunjukkan bahawa

pengulas adalah peribadi< h2>.

Sebaik sahaja ini berfungsi, saya akan menambah pilihan v-if-else dan v-else

Kod saya adalah seperti berikut.

Tiada ralat dibenderakan dalam VSC, tetapi teks dalam teg

tidak kira apa nilai < tidak kira sama ada ia sama dengan keepFullyPrivate.

<div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2> Identiti pengulas adalah peribadi</h2></div>

Kemas kini (maklumat tambahan):

• Saya menggunakan versi Vue 3.2.1
• Data yang diperoleh daripada Firestore adalah betul. Contohnya, dalam induk yang sama seperti kod di atas, baris kod ini

  Pilihan privasi untuk ulasan ini: {{ review.reviewPrivacy }}

  Paparkan teks berikut: Pilihan privasi untuk ulasan ini: postAnonPublic, yang merupakan v-else-if

Kemas kini kedua: Seperti yang diminta dalam ulasan, jadikan kod sebagai blok lengkap:

<div class="review-detailZ">
<div> <!-- BEGIN lajur utama (sebelah kiri) -->
  <p>Pilihan privasi untuk ulasan ini: {{ review.reviewPrivacy }}</p>
  <br />
   
  <!-- Menggunakan versi Vue 3.2.1 -->
          
   <div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2>Identiti penyemak adalah peribadi</h2></div>
   <div v-else-if="('review.reviewPrivacy', '==', 'postAnonPublic')"><h2>Tanpa Nama - Penyemak: {{ review.userName }}</ h2> ;</div>
   <div v-else><h2>Penyemak memilih pendedahan penuh - nama penuh {{ review.userFirstName }} {{ review.userLastName }}</h2></div>
   
  <br />
  <p>Dibuat {{ review.createdAt }} hari yang lalu</p>
  <br />
</div>

Terima kasih!

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 akan sentiasa diberikan.

Ungkapan yang betul untuk perbandingan review.reviewPrivacy和'keepFullyPrivate' ialah:

review.reviewPrivacy == 'keepFullyPrivate'

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

Adalah amalan yang baik untuk membuat ===perbandingan yang ketat menggunakan tiga tanda yang sama ().

Jadi keputusan akhir sepatutnya:

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