Cara menggunakan v-if dalam gelung v-for dalam vue.js 2

Question

Saya mempunyai persediaan kod ini

<div v-for="person in persons">
    <div v-if="person.status == 'public'" :key="person.id">
        Hi,my name is {{person.name}}
    </div>
    <div v-else :key="person.id">
        This person is private
    </div>
</div>

person 对象中的 status Semua nilai hartanah adalah "awam"!

Tetapi dalam coretan di atas, bukan blok if 块，而是 else yang terus berjalan.

Jika saya menulis semula kod seperti ini:

<div v-for="person in persons" :key="person.id">
    <div v-if="person.status == 'public'">
        Hi,my name is {{person.name}}
    </div>
    <div v-else>
        This person is private
    </div>
</div>

Kemudian ia akan berfungsi seperti biasa.

Apa yang salah dengan klip pertama?

Nampaknya atribut "kunci" memainkan peranan dalam perkara ini. Adakah cara saya menggunakannya salah? Mengapa ia menjejaskan output?

Antara ini yang manakah cara paling betul untuk menulis pernyataan "jika" di dalam gelung "untuk"?

Saya telah menggunakan kaedah pertama dalam gelung lain dalam kod saya sebelum ini dan tiada masalah sehingga hari ini. Adakah saya perlu mengemas kini semuanya supaya serupa dengan kaedah kedua untuk mengelakkan tingkah laku pelik seperti ini?

Answer 1

Daripada vue v-untuk dan v-jika

Anda menggunakan v-for 和 v-if。问题在于 :key dengan betul diletakkan pada blok bersyarat.

Walau bagaimanapun, sesuatu akan dipaparkan dalam div, anda mempunyai dua kemungkinan hasil dan kuncinya harus berada dalam atribut v-for 线上。您不应有条件地呈现 :key.

// 1
<div>
   <div>
      Hi,my name is john
   </div>
</div>

// 2
<div>
  <div>
     This person is private
  </div>
</div>