Eine leere Liste

Eine leere Liste zeigt nichts, und eine leere Seite sieht kaputt aus. Ist eine Liste leer, sag es also: Setze v-if an eine Meldung und v-else an die Liste:

<p v-if="bestellung.length === 0">Deine Bestellung ist leer. Wähle etwas aus der Speisekarte!</p>
<ul v-else>
    <li v-for="artikel in bestellung" :key="artikel.id">{{ artikel.name }}</li>
</ul>

Immer wenn die Bestellung leer wird, nimmt die Meldung den Platz der Liste ein, und wird etwas hinzugefügt, kommt die Liste zurück.

Um einen Eintrag zu entfernen, kann ein Button in jedem li den Index seines Eintrags an einen Handler übergeben, der den Eintrag mit splice() entfernt, wie in der Lektion State und Ereignisse:

function artikelEntfernen(index) {
    bestellung.value.splice(index, 1);
}

<li v-for="(artikel, index) in bestellung" :key="artikel.id">
    {{ artikel.name }}
    <button @click="artikelEntfernen(index)">Entfernen</button>
</li>

Jeder Button ruft artikelEntfernen() mit dem Index seines eigenen Eintrags auf, und Vue entfernt das Element dieses Eintrags. Als Argument ist der Index in Ordnung: Er ist die Position des Eintrags im Moment des Klicks, und genau die braucht splice(). Als Schlüssel wäre er immer noch falsch.