Kurs Vue.js krok po kroku – Obliczone właściwości

Dzisiaj zajmiemy się „obliczonymi właściwościami” („computed properties”) (coraz trudniej jest mi tłumaczyć te angielskie terminy, czasami zastanawiam się czy jest sens).

Kiedy przekazujemy zmienną do widoku możemy na niej wykonywać jakieś proste akcje. Dla przykładu:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

Póki to coś prostego i jednorazowego to pół biedy. Ale kiedy tylko zaczniemy mieć bardziej skomplikowane wymagania albo będą one potrzebne w wielu miejscach aplikacji to takie działanie staje się mało rozsądne. I tu właśnie z pomocą przychodzą „computed properties”.

Być może spotkałeś się już z taką konstrukcją w innych językach czy bibliotekach. To nic innego jak typowy „accessor” tudzież „getter”. Definiujemy jakąś funkcję, która zwraca nam jakieś dane i do niej się odwołujemy w szablonach.

Sprawdźmy jak to działa na przykładzie, przy okazji wykorzystamy umiejętności z poprzednich odcinków. Zróbmy licznik kliknięć w button, przy czym nadajmy każdemu kliknięciu podwójną wartość.

<div id="app">
  <button @click="increment">Zwiększ licznik</button>
  <p>Suma: {{ counter }}</p>
  <p>Kliknięć: {{ clicks }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    clicks: 0
  },
  methods: {
    increment() {
      this.clicks++;
    }
  },
  computed: {
    counter() {
      return this.clicks * 2;
    }
  }
})

Jeszcze lepiej widać to na klasycznym przykładzie z zadaniami do wykonania. Mamy listę zadań ze zmienną completed = true/false. Wyświetlamy je w pętli i do ukończonych/nieukończonych podstawiamy funkcję, która zwraca te dane aczkolwiek już przefiltrowane.

I teraz najfajniejsza rzecz we Vue.js. Wystarczy, że dostawimy checkboxa z completed = true/false i teraz działanie na nim w „real-time” powoduje przeskakiwanie zadań do odpowiedniej grupy.

Jedna dyrektywa.

Magia.

Prostota.

Vue.js.

<div id="app">
  <h2>Wszystkie zadania</h2>
    <ul>
      <li v-for="task in tasks"><input type="checkbox" v-model="task.completed" />{{ task.description }}</li>
    </ul>

    <h2>Nieukończone</h2>
    <ul>
      <li v-for="task in incompleteTasks" v-text="task.description"></li>
    </ul>

    <h2>Gotowe</h2>
    <ul>
      <li v-for="task in completeTasks" v-text="task.description"></li>
    </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
      tasks: [
        { description: 'Nauczyć się Vue.js', completed: true },
        { description: 'Posłuchać podcastu', completed: false },
        { description: 'Wyjść pobiegać', completed: false },
        { description: 'Shejtować Laravela', completed: false },
        { description: 'Poczytać webmastaha', completed: false },
        { description: 'Obejrzeć Better Call Saul', completed: true }
      ]
    },
    computed: {
      incompleteTasks() {
        return this.tasks.filter(task => ! task.completed);
      },
      completeTasks() {
        return this.tasks.filter(task => task.completed);
      }
    }
})

Subskrybuj kanał na YouTube

Ten kurs to przede wszystkim kurs VIDEO co oznacza, że więcej informacji, przykładów, omówienie poszczególnych kroków i w ogóle dużo więcej niż w powyższym tekście znajdziesz w materiale video. Materiał pojawi się w tym miejscu w ciągu najbliższych 2 tygodni. Nie chcesz przegapić? Subskrybuj kanał na YouTube!

Kurs Vue.js krok po kroku

1. Wprowadzenie i hello world
2. Chrome DevTools
3. Warunki i pętle
4. Zdarzenia i metody
5. Przypisywanie atrybutów
6. Obliczone właściwości
7. kolejne
8. odcinki
9. wkrótce