Paparan bersyarat dalam Vue: Tunjukkan hanya jika nilai medan Firestore sepadan dengan nilai rentetan tertentu
P粉007288593
2023-08-28 18:48:23
<p>Medan pangkalan data Firestore (<kod>ulasanPrivasi</kod> medan dalam koleksi "ulasan") adalah daripada jenis rentetan, diisi oleh input borang Vue (butang radio), dengan tiga kemungkinan jawapan (nilai) Satu ialah < ;kod>keepFullyPrivate</code>. </p>
<p>Jika nilai <code>review.reviewPrivacy</code> ialah <code>keepFullyPrivate</code>, saya ingin menunjukkan bahawa <code><h2>pengulas adalah peribadi< h2></kod>. </p>
<p>Sebaik sahaja ini berfungsi, saya akan menambah pilihan <kod>v-if-else</code> dan <code>v-else</code> </p>
<p>Kod saya adalah seperti berikut. </p>
<p>Tiada ralat dibenderakan dalam VSC, tetapi teks dalam teg <kod><h2></code> tidak kira apa nilai < tidak kira sama ada ia sama dengan <kod>keepFullyPrivate</code>. </p>
<pre class="brush:php;toolbar:false;"><div v-if="('review.reviewPrivacy', '==', 'keepFullyPrivate')"><h2> Identiti pengulas adalah peribadi</h2></div></pre>
<p>Kemas kini (maklumat tambahan): </p>
<ul>
<li>Saya menggunakan versi Vue 3.2.1</li>
<li>Data yang diperoleh daripada Firestore adalah betul. Contohnya, dalam induk yang sama seperti kod di atas, baris kod ini <kod><p>Pilihan privasi untuk ulasan ini: {{ review.reviewPrivacy }}</p></code> Paparkan teks berikut: <em>Pilihan privasi untuk ulasan ini: postAnonPublic</em>, yang merupakan <kod>v-else-if</code> </li>
</ul>
<p>Kemas kini kedua: Seperti yang diminta dalam ulasan, jadikan kod sebagai blok lengkap: </p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>Terima kasih! </p>
('review.reviewPrivacy', '==', 'keepFullyPrivate')
只是一组以逗号分隔的字符串,并且它的值为最后一个字符串:'keepFullyPrivate'
,所以你的标记变成了v-if="'keepFullyPrivate'"
,它总是为真。因此,div
及其h2
akan sentiasa diberikan.Ungkapan yang betul untuk perbandingan
review.reviewPrivacy
和'keepFullyPrivate'
ialah:Adalah amalan yang baik untuk membuat
===
perbandingan yang ketat menggunakan tiga tanda yang sama ().Jadi keputusan akhir sepatutnya: