Migration von Vue 2 zu Vue 3: Wichtige Änderungen bei v-for und v-if

Vue 2 und Vue 3 nutzen häufig die Directives v-for und v-if, die unter anderem dazu dienen, Listen unbekannter Länge oder bedingte Inhalte in Vue-Anwendungen darzustellen. Die Funktionsweise dieser Directives hat sich in Vue 3 jedoch verändert, was sich auf Ihre Code-Verwendung auswirkt.

Der Hauptunterschied zwischen Vue 2 und Vue 3 in Bezug auf v-for und v-if ist die Änderung ihrer Priorität. In Vue 2 hat v-for einen höheren Vorrang als v-if. Dies bedeutet, dass, wenn Sie beide Directives auf demselben Element anwenden, v-for zuerst ausgeführt wird.

In Vue 2 könnte es so aussehen:

<ul>
  <li v-for="item in items" v-if="item.active">
    {{ item.name }}
  </li>
</ul>

In diesem Beispiel iteriert v-for über eine Liste von Elementen, während v-if überprüft, ob jedes Element aktiv ist. Nur die aktiven Elemente werden gerendert.

In Vue 3 wurde die Priorität jedoch umgekehrt. Um in Vue 3 dasselbe Verhalten wie im obigen Vue-2-Beispiel zu erreichen, muss man eine verschachtelte Struktur verwenden:

<ul>
  <li v-for="item in items">
    <span v-if="item.active">{{ item.name }}</span>
  </li>
</ul>

Hier wird v-for verwendet, um über die Liste zu iterieren, und v-if wird innerhalb des li-Elements auf das span-Element angewendet. Dies entspricht dem Verhalten des Vue-2-Beispiels.

Haben Sie noch Fragen? Wünschen Sie eine Beratung rund um die Anwendungsenwicklung? Dann können Sie gerne mit uns Kontakt aufnehmen oder unsere Webseite besuchen. Wir lassen Ihnen gerne ein unverbindliches Angebot zukommen.

Hier auf unserem Blog finden Sie auch weitere Artikel zum Thema VueJS.