Prázdný seznam

Prázdný seznam neukáže nic a prázdná stránka vypadá rozbitě. Když je seznam prázdný, řekněte to: dejte v-if na zprávu a v-else na seznam:

<p v-if="objednavka.length === 0">Vaše objednávka je prázdná. Vyberte si něco z nabídky!</p>
<ul v-else>
    <li v-for="polozka in objednavka" :key="polozka.id">{{ polozka.nazev }}</li>
</ul>

Kdykoli se objednávka vyprázdní, zpráva zaujme místo seznamu, a když se něco přidá, seznam se vrátí.

K odebrání jedné položky může tlačítko v každém li předat obsluze index své položky a obsluha ji odebere pomocí splice(), jako v lekci Stav a události:

function odeber(index) {
    objednavka.value.splice(index, 1);
}

<li v-for="(polozka, index) in objednavka" :key="polozka.id">
    {{ polozka.nazev }}
    <button @click="odeber(index)">Odebrat</button>
</li>

Každé tlačítko zavolá odeber() s indexem své položky a Vue odstraní prvek té položky. Jako argument je index v pořádku: je to pořadí položky v okamžiku kliknutí, a přesně to splice() potřebuje. Jako klíč by byl pořád špatně.