So lösen Sie das Problem von Rot und Warnung bei Verwendung von v-for in Vue (ausführliches Tutorial)

Im Folgenden werde ich einen auf Vue basierenden Artikel mit Ihnen teilen, der das Problem der roten Berichterstattung und Warnungen bei der Verwendung von V-for löst. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Code Red Reporting ist für Menschen mit Zwangsstörungen, die schönen Code verfolgen, sehr unangenehm. Das Red Reporting lautet wie folgt:

In der Konsole werden auch Eingabeaufforderungen wie diese angezeigt:

(Emitted value instead of an instance of Error) <Option v-for="item in searchTypeList">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

Um dieses rote Meldeproblem zu lösen, müssen wir zyklisch vorgehen Wenn Sie einen eindeutigen Schlüssel hinzufügen, verwenden Sie hier den Index:

<ul 
class="clearfix course-list">
<li 
class="left" 
v-for="(item,index)
in gradeClassfy.primary.grade"
:key="index"><a
href="#" rel="external nofollow" >{{item.name}}</a></li>
</ul>

Auf diese Weise verschwindet der rote Bericht .

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So passen Sie den Player basierend auf dem Vue-Video-Player an

Vue kapselt ein einfaches und leichte Beispiele für eine große Anzahl von Upload-Dateikomponenten

Implementierung einer Glücksziehungsseite auf Basis von JavaScript

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem von Rot und Warnung bei Verwendung von v-for in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!