Vue – v-for

Kolejna szybka lekcja. Poznajemy v-for do wyświetlania list używając Vue.js. Do dzieła!

Ok, najpierw nasza apka:

const app = Vue.createApp({
    data() {
      return {
        people: [
            {
                id: 1,
                name: "John Doe"
            },
            {
                id: 2,
                name: "Jane Doe"
            }
        ]
      };
    },
    
  });
  
app.mount('#app');

Teraz markup:

<div id="app">
        <ul>
            <li v-for="person in people">Name: {{person.name}}</li>
        </ul>
</div>

Jak widać podejście dość ciekawe – nie mamy żadnych bloków if, else, endif jak w Laravelu, wewnątrz których prezentujemy markup, ani żadnych komponentów logicznych (jak w biblioteczkach control statements, które można doinstalować do Reacta), gdzie wrzucamy markup.

Zamiast tego na tym właśnie markupie, na tym elemencie robimy v-for. Ciekawe.

Powinniśmy jednak dołożyć klucz:

<div id="app">
        <ul>
            <li v-for="person in people" :key="person.id">Name: {{person.name}}</li>
        </ul>
</div>

Po co klucz? Domyślnie, jak usuniemy element z listy (tablicy w data) to Vue usunie ostatni <li> (czy dowolny ostatni element, który ma v-for), a później, często z błędami, spróbuje mergować pozostałe elementy.

Dopiero jak ustawimy klucz (i musi być jakoś unikalny dla rekordu) to możemy bezproblemowo usuwać elementy z tablicy.