Vue 2 podstawy - pętle, warunki

Kolejny artykuł na temat podstaw Vue 2. Opiszę pętle i warunki. Spójrzmy na poniższy kod. Pokazuje on jak przeiterować się przez tablicę. W vue używamy atrybutu v-for.

W htmlu napiszmy:

<div id="root">
    <ul>
        <li v-for="name in names">
            {{ name }}
        </li>
    </ul>
</div>

Natomiast w javascript:

let app = new Vue({
	el: '#root',
	data: {
		names: ['Joe', 'Mary', 'James', 'Jack']
	}
});

Dodamy teraz przycisk, którym będziemy dodawać elementy do naszej listy.

<ul>
	<li v-for="name in names">
		{{ name }}
	</li>
</ul>

<input type="text" v-model="newName">
<button @click="addName">Add name</button>

Kod js obsługujący dodawanie do tablicy.

let app = new Vue({
	el: '#root',
	data: {
		newName: '',
		names: ['Joe', 'Mary', 'James', 'Jack']
	},
	methods: {
		addName() {
			this.names.push(this.newName);
			this.newName = '';
		}
	}
});

Jak widać powyżej po kliknięciu na button wywołuje się metoda addName. Dzięki połączeniu danych z pola tekstowego za pomocą v-model dodajemy nowe wpisane imię do naszej tablicy z imionami (names). Wszystko się dynamicznie aktualizuje dzięki Vue. Tak jak w każdym języku programowania w vue mamy do dyspozycji instrukcje warunkowe. Najlepiej pokażę to na przykładach. Przykład v-if v-else:

<h1 v-if="zm">widoczne jesli zm true</h1>
<h1 v-else>zm false</h1>

Jeśli zm będzie true pokaże się pierwszy tag h1 w przeciwnym wypadku drugi. Ponieważ v-if jest dyrektywą, musi być dołączona do jednego elementu. Ale co, jeśli chcemy przełączyć więcej niż jeden element? W tym przypadku możemy użyć v-if na elemencie template, który służy jako niewidzialne opakowanie. Ostatecznie renderowany wynik nie będzie zawierał elementu template.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

Istnieje również konstrukcja v-else-if.

<div v-if="type === 'Lorem'">
  Lorem
</div>
<div v-else-if="type === 'Ipsum'">
  Ipsum
</div>
<div v-else-if="type === 'Dolor'">
  Dolor
</div>
<div v-else>
  Coś innego
</div>