Comment utiliser v-if dans la boucle v-for dans vue.js 2

Question

J'ai cette configuration de code

<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 Toutes les valeurs des propriétés sont "publiques" !

Mais dans l’extrait ci-dessus, ce n’est pas le bloc if 块，而是 else qui continue de s’exécuter.

Si je réécris le code comme ceci :

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

Ensuite, cela fonctionnera normalement.

Qu'est-ce qui ne va pas avec le premier clip ?

On dirait que l'attribut "clé" joue un rôle à cet égard. La façon dont je l'utilise est-elle mauvaise ? Pourquoi cela affecte-t-il le rendement ?

Laquelle de ces méthodes est la manière la plus correcte d'écrire une instruction « if » dans une boucle « for » ?

J'ai déjà utilisé la première méthode dans d'autres boucles de mon code et je n'ai eu aucun problème jusqu'à aujourd'hui. Dois-je tous les mettre à jour pour qu'ils soient similaires à la deuxième méthode afin d'éviter un comportement étrange comme celui-ci ?

Answer 1

De vue v-for et v-if

Vous avez correctement utilisé v-for 和 v-if。问题在于 :key étant placé sur le bloc conditionnel.

Dans tous les cas, quelque chose sera rendu à l'intérieur du div, vous avez deux résultats possibles et la clé devrait être dans l'attribut v-for 线上。您不应有条件地呈现 :key.

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

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