Fullstack Dev

Iterace: Od základních polí po složité kolekce

Je téměř nemožné vytvořit aplikaci bez potřeby iterace přes pole. Například pokud chcete zobrazit seznam vlastností, pravděpodobně budete muset iterovat přes ně. Direktiva v-for ve Vue tento proces činí bezproblémovým a efektivním.

Základní příklad: Iterace přes pole

Začněme jednoduchým scénářem: iterace přes pole jmen.

const petNames = ref(['Luna', 'Star', 'Black']);

Pro zobrazení každého jména použijte v šabloně direktivu v-for:

<p v-for="(name, index) in petNames" :key="index">
  {{ name }} je na pozici {{ index + 1 }}
</p>

• v-for="(name, index) in names": Prochází pole names, kde každý prvek je dostupný jako name a jeho pozice jako index

• :key="index": Zajišťuje efektivní aktualizace DOM přidáním unikátního identifikátoru pro každý prvek

• index + 1: Převádí index začínající od nuly na lidsky čitelné číslování

Po vykreslení bude výstup vypadat takto:

Vytváření seznamů pomocí iterací

Seznamy můžete také vytvořit obalením direktivy v-for do tagů <ul> a <li>:

<ul>
  <li v-for="(name, index) in petNames" :key="index">
      {{ index + 1 }}. {{ name }}
  </li>
</ul>

Iterace přes kolekci objektů

Při práci s kolekcemi, jako je pole objektů, můžete během iterace přistupovat k jednotlivým vlastnostem.

const pets = ref([
  { name: 'Luna', type: 'Kočka' },
  { name: 'Henry', type: 'Papoušek' },
  { name: 'Black', type: 'Pes' }
]);

Takto můžete zobrazit jméno a typ každého mazlíčka:

<ul>
  <li v-for="(pet, index) in pets" :key="index">
      {{ pet.type }}: {{ pet.name }}
  </li>
</ul>

• pet.type a pet.name: Přístup k vlastnostem type a name každého objektu mazlíčka

• :key="index": Pomáhá Vue optimalizovat vykreslování

Výstup:

Iterace přes klíč-hodnotu objektu

Někdy může být potřeba iterovat přes klíče a hodnoty objektu místo pole. Uvažujme například objekt reprezentující uživatele:

const user = ref({
  name: 'Tomas',
  lastName: 'Jones',
  age: 30,
});

Použitím v-for můžete extrahovat jak klíče, tak hodnoty:

<ul>
  <li v-for="(value, key, index) in user" :key="index">
    {{ key }}: {{ value }}
  </li>
</ul>

(value, key, index) in user: Iteruje přes objekt, kde hodnoty jsou dostupné jako value, klíče jako key a pozice jako index

Výstup:

Srovnání s Reactem nebo Angularem

V porovnání s jinými frameworky jako React nebo Angular, Vue.js zjednodušuje iterace díky intuitivní a snadno použitelné direktivě v-for. Ať už pracujete s poli, kolekcemi, nebo objekty, Vue eliminuje potřebu složitých JavaScriptových funkcí nebo externích knihoven.

Závěr

• Používejte v-for pro snadnou iteraci přes pole, kolekce nebo objekty

• Vždy přidávejte :key pro zajištění efektivní aktualizace DOM

Video

Nerad čteš, tak mrkni na video 👇

Podmíněné vykreslování a direktivy Zpracování událostí a modifikátory