Listen in Vue.js erstellen mit v-for

15. March 2017 - Javascript, Vue.js

Wir leben ja bekanntlich in einer Zeit, in der es normal ist möglichst viele Daten zu erheben, zu analysieren und somit auch später wieder auszugeben. Im besten Fall wird es wohl so aussehen. Oder man erhebt so viele Daten, dass sie nicht mehr analysiert werden können und sie bleiben bloß auf irgendwelchen Google Servern und warten darauf alt zu werden.

Gehen wir vom besten Fall aus und wir haben Daten, die irgendwie dargestellt werden sollen. Beispielsweise in einer Liste. Dies erreichen wir in Vue.js mit dem Attribut v-for. Mit Hilfe von v-for können wir einfach über eine Liste iterieren und uns jeden einzelnen Eintrag ausgeben lassen.

Das schöne dabei ist, dass die einzelnen Einträge nicht bloß Strings oder Zahlen sein müssen, sondern dass die einzelnen Einträge auch Objekte sein können mit jeweils mehreren Eigenschaften.
So können wir zum Beispiel eine Liste mit Pizzen ausgeben, die neben dem Belag einer Pizza auch gleich den Preis dafür beinhaltet.

Diese Liste wollen wir einfach mal unter dem Namen items in unserem data Attribut der Vue Instanz ablegen. Das Ganze sieht dann folgendermaßen aus:

new Vue({
  el: '#newContainer',
  data: {
    title: 'Dies ist ein neuer Div Container',
    items: [
      {
        belag: 'Tomate',
        preis: 5
      }, 
      {
        belag: 'Thunfisch',
        preis: 7
      }, 
      {
        belag: 'Spinat',
        preis: 6
      }
    ]
  }
});

Nun müssen wir das alles noch über v-for in unserem HTML Code ausgeben.

Hier sagen wir eigentlich so etwas wie “gib mir jedes item aus dem items array”. Übersetzt heißt das v-for=”item in items”. items ist eben mein gewünschtes Array, wo die Daten liegen. item ist dann das jeweilige einzelne Objekt meines Arrays. Der Name ist frei wählbar. Es ist also nicht notwendig die Singular Variante des Plurals (vom Array) zu nehmen, so wie ich das hier gemacht habe. Hier kann idR jedes Wort stehen. Aber so ist es am einfachsten und übersichtlichsten.

Jedes einzelne Objekt (hier item) kann  ich mir nun ausgeben lassen. Beispielsweise in einem einzelnen Div oder aber in einzelnen Listen Unterpunkten (li). Man kann sich natürlich nicht nur die Objekte selbst ausgeben lassen, sondern auch die einzelnen Eigenschaften/Variablen der jeweiligen Objekte.
So können wir uns eine Liste ausgeben lassen, die sowohl unseren Belag als auch den dazugehörigen Preis ausgibt.

Dies geschieht über die Punktnotation und sieht wie folgt aus:

<div v-for="item in items">	
{{item.belag}} - {{item.preis}}€
</div>

So wird für jeden einzelnen Eintrag aus unserem items Array ein Div erstellt, in dem sowohl der Belag ausgegeben wird, als auch der Preis.

Versehen wir alles noch mit einer entsprechenden Überschrift sieht unsere Ausgabe am Ende im Browser so aus:

Ausgabe unserer Pizzen mit Belag und Preis dahinter

 

Hinterlass doch ein Like :)Share on FacebookTweet about this on TwitterShare on Google+

Leave a Reply