Raison de l'erreur:
lorsque v-if et v-for sont utilisés ensemble, v-for a une priorité plus élevée que v-if, ce qui signifie que v-if s'exécutera à plusieurs reprises dans chaque boucle v-for.
Par conséquent, il n'est pas recommandé d'utiliser v-if et v-for en même temps
Méthode recommandée:
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{
{ user.name }}
</li>
</ul>
Mettez-le sur l'élément extérieur ou enveloppez-le avec la balise template (le template est une nouvelle balise de html5, sans signification particulière)
<template v-for="Oitem in Object.keys(cItem)">
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 8}"
:key="Oitem"
v-if="Oitem !== 'title'"
v-model="cItem[Oitem]">
</el-input>
</template>
Remarque: la valeur de la clé se trouve dans l'élément enveloppé
Lorsqu'ils sont sur le même nœud, v-for a une priorité plus élevée que v-if, ce qui signifie que v-if s'exécutera à plusieurs reprises dans chaque boucle v-for. Ce mécanisme de priorité est très utile lorsque vous souhaitez restituer des nœuds pour seulement quelques éléments, comme suit:
<li v-for="todo in todos" v-if="!todo.isComplete">
{
{ todo }}
</li>
Le code ci-dessus ne transmet que les tâches inachevées.
Et si votre objectif est de sauter conditionnellement l'exécution de la boucle, utilisez les deux premières méthodes.