4. diel - Podmienky a cykly vo Vue.js

V minulej lekcii, Dáta a Props v komponentoch , sme sa naučili pracovať s dátami vnútri Vue komponenty a odovzdávať dáta do jednotlivých komponentov prostredníctvom Props. Tiež sme sa zoznámili s možnosťou validovať Props a mať tak pod kontrolou dátové typy.

Pripomeňme si najskôr finálny vzhľad našej kalkulačky, ktorý chceme dosiahnuť.

Renderovanie v cykloch

V tejto chvíli máme hotový prvý riadok, ostávajú nám teda 4 riadky:

Všimnime si, čo majú spoločné - všetky obsahujú práve 4 tlačidlá. V komponente TheLayout sme tieto riadky zatiaľ nahradili obyčajným elementom <div>. Je na čase vytvoriť si komponent, ktorá nám bude reprezentovať práve jeden takýto riadok so štyrmi kalkulačkovými tlačidlami.

V adresári src/components vytvoríme nový súbor s názvom CalculatorRow.vue a napíšeme do neho tento kód:

<template>
  <div class="calculator-row">
    <calculator-button v-for="button of buttons" :key="button" :display-value="button"/>
  </div>
</template>
<script>
export default {
  name: 'CalculatorRow',
  props: {
    buttons: {
      required: true,
      validator: (v) => Array.isArray(v) && v.length === 4 && new Set(v).size === 4
    }
  },
}
</script>

Najprv si vysvetlíme Props v skripte. Komponent bude požadovať povinnú prop s názvom buttons. Vo validačnej funkcii overíme, že hodnota má dátový typ poľa. Ďalej overíme, že toto pole obsahuje práve 4 prvky. Nakoniec overíme skutočnosť, že všetky prvky v poli majú unikátnu hodnotu (v riadku sa nemôžu opakovať dve rovnaké tlačidlá). Touto validačný funkcií nadväzujeme na predchádzajúcu lekciu a pripomíname si použitia validácia Props v komponentoch.

Napríklad druhý riadok kalkulačky bude obsahovať tlačidlá 7, 8, 9 a /. Komponenta CalculatorRow, ktorá bude tento riadok predstavovať, bude musieť dostať do svojej prop buttons toto pole: ['7', '8', '9', '/'].

Teraz k šablóne. Je tvorená obalujícím elementom <div> s CSS triedou .calculator-row. Pripomínam, že táto trieda je už deklarovaná v štýloch komponenty TheLayout, nie je potrebné ju teda znovu deklarovať tu. CSS deklarácie sú vo Vue globálne, ak toto nastavenie nezmeníme, ale o tom neskôr.

Obalový element <div> obsahuje komponent CalculatorButton. Pripomeňme si, že sme ju registrovali v druhej lekcii globálne, o jej registráciu sa teda v tejto chvíli už starať nemusíme.

V zápise tohto komponentu v šablóne si všimnime direktívy v-for. Ide o direktívu, ktorá nám umožňuje cyklické renderovanie podľa prvkov poľa. Kód v-for="button of buttons" prechádza pole buttons, ktoré máme definované v Props. Pri každej tejto iterácii sa vytvorí jedna inštancia komponenty CalculatorButton. Týmto kódom sme si tiež vytvorili premennú button, ktorá obsahuje práve iterovaného prvok poľa buttons. Premenou používame hneď v tej istej komponente - priraďujeme pomocou direktívy v-bind hodnotu premennej button do prop s názvom displayValue komponentmi CalculatorButton. Do tlačidlá tak dostávame práve ten znak, ktorý na ňom má byť zobrazený.

Ďalej si všimnime direktívy v-key, ktorá je v kóde zapísaná skratkou :key (obaja zápisy v-key a :key sú ekvivalentné). Pri renderovanie v cykloch je potrebné, aby každá zobrazovaná komponenta mala k sebe priradený unikátny kľúč, pomocou ktorého ju Vue bude môcť identifikovať. Toto priradenie kľúča je syntaktickú podmienkou frameworku Vue 3. V našej kalkulačke si môžeme byť istí, že každé tlačidlo bude obsahovať iný znak. Hodnota premennej button teda bude jedinečná a môžeme ju priamo použiť ako kľúč.

Podrobnejšie o direktíve v-for

Nasledujúce príklady s našou kalkulačkou priamo nesúvisí, môžete si ich ale vyskúšať v ktorejkoľvek už existujúce zobrazované komponente, alebo si pre ne vytvoriť komponent novú.

Renderovanie cyklov môžeme použiť na ktorejkoľvek Vue komponente, rovnako tak ale aj na ľubovoľnom HTML elementu. Napríklad kód:

<template>
  <div v-for="greeting of ['ahoj', 'čau']" :key="greeting" >{{ greeting }}</div>
</template>

nám zobrazia dva elementy <div>, prvý s textom "ahoj", druhý s textom "čau".

Pre úplnosť ešte dodajme, že okrem práve iterovaného prvku poľa môžeme zobrazované komponente (alebo HTML elementu) odovzdať aj index (poradie prvku v poli počítanej od nuly).

Keď si predchádzajúce kód upravíme takto:

<template>
  <div v-for="(greeting, index) of ['ahoj', 'čau']" :key="greeting" >{{ (index + 1) + '. pozdrav:' + greeting }}</div>
</template>

zobrazia sa vám dva elementy <div>, ktoré budú obsahovať texty "1. pozdrav: ahoj" a "2. pozdrav: čau".

Vnorenia cyklov

Vráťme sa späť k našej kalkulačke. Máme vytvorenú komponent CalculatorRow, zatiaľ ju však nikde nezobrazujeme. Zobrazíme ju v našej hlavnej komponente TheLayout a to dokonca 4x, pretože naše kalkulačka bude mať celkom 4 riadky. Upravme skript komponenty TheLayout takto:

import CalculatorRow from '@/components/CalculatorRow.vue'
export default {
  name: 'TheLayout',
  data () {
    return {
      value: '0',
      rows: [
        ['7', '8', '9', '/'],
        ['4', '5', '6', 'X'],
        ['1', '2', '3', '-'],
        ['0', ',', '=', '+']
      ]
    }
  },
  components: { CalculatorRow }
}

Tým sme v dátach tejto komponenty vytvorili dvojrozmerné pole rows. Jeho prvky sú polia obsahujúce znaky tlačidiel na jednotlivých riadkoch kalkulačky. Teraz už nám nič nebráni použiť komponent CalculatorRow v cykle. Šablónu TheLayout teda upravíme takto:

<template>
  <div class="container">
    <div class="calculator">
      <div class="calculator-row">
        <div class="display"></div>
        <calculator-button display-value="C"/>
      </div>
      <calculator-row
         v-for="(row, index) of rows"
        :key="'row' + (index + 1)"
        :buttons="row"/>
    </div>
  </div>
</template>

Teraz vidíme, že sme pod prvým riadkom kalkulačky zobrazili 4 ďalšie riadky, a to cyklickým použitím komponenty CalculatorRow. Tá sama už v sebe obsahuje cyklus pre zobrazovanie jednotlivých tlačidiel, náš kód je teda príkladom toho, ako je možné zobrazovať cykly navzájom vnorené do seba.

Podobne by mohlo byť nakódovanie vnorenia dvoch cyklov len v jedinej komponente - direktíva v-for môže byť neobmedzene ponáranie. Všimnime si tiež, že pole znakov, ktoré majú byť zobrazené v jednotlivých riadkoch kalkulačky, odovzdávame direktívou v-bind do prop buttons každej inštancie komponenty CalculatorRow.

Unikátny kľúč každej inštancie tohto komponentu teraz tvoríme pomocou stringu "row" a indexu. Kľúče budú mať hodnoty "row1", "row2", atď., Čím je zaistená ich jedinečnosť v celom HTML dokumente.

V prehliadači teraz uvidíme kalkulačku v tejto podobe:

Podmienené renderovanie - direktívy v-if, v-else-if, v-else

Direktíva v-if musí obsahovať javascriptový výraz a komponent, resp. HTML element direktívu obsahujúce sa zobrazí len vtedy, ak je výsledok výrazu pravdivý (Truth).

Podobne funguje direktíva v-else-if, musí však byť radená v poradí za v-if a jej výraz sa vyhodnocuje len vtedy, ak nie je splnená podmienka predchádzajúca v-if.

Direktíva v-else už žiadny výraz neobsahuje a musí byť radená za direktívu v-if, respektíve v-else-if. Element, ktorý ju obsahuje, je zobrazený len vtedy, ak nie je splnená žiadna z podmienok predchádzajúcich direktív.

Je potrebné pripomenúť, že zobrazovanie elementov pomocou týchto direktív je absolútna, nejde teda o obyčajné skrývanie či odkrývanie elementov pomocou CSS štýlov (napr. display: none alebo visibility: hidden). Elementy, u ktorých tieto direktívy určí, že nemajú byť zobrazené, skrátka nie sú vo výslednom HTML dokumente vôbec obsiahnuté.

Aby sme si vyskúšali podmienenej renderovanie, odlíšime graficky pozadia tlačidla, ktoré obsahuje písmeno "C" od ostatných tlačidiel kalkulačky. Upravme kód komponenty CalculatorButton takto:

<template>
  <div
    v-if="displayValue === 'C'"
    class="calculator-button calculator-button-operator">
    {{ displayValue }}
  </div>
  <div
    v-else
    class="calculator-button">
    {{ displayValue }}
  </div>
</template>

<script>
export default {
  name: 'CalculatorButton',
  props: {
    displayValue: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.calculator-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .75em;
  font-size: 1.5rem;
  font-weight: bold;
  flex: 0 0 auto;
  width: 60px;
  cursor: pointer;
  transition: all .3s ease-in-out;
}
.calculator-button:not(.calculator-button-operator) {
  background: transparent
}
.calculator-button:not(.calculator-button-operator):hover {
  background: #F2EDCF;
}
.calculator-button:active {
  transform: scale(.85);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .15)
}
.calculator-button-operator {
  background: #fee8d7;
}
.calculator-button-operator:hover {
  background: #FDDDC3;
}
</style>

Vo webovom prehliadači teraz vidíme, že tlačidlo "C" má tmavšiu farbu pozadia ako ostatné:

Komponent zobrazuje vždy jeden z dvoch elementov <div>, ktoré sú nakódovanie v šablóne, a to podľa vyhodnotenia podmienky obsiahnuté v direktíve v-if.

V ďalšej lekcii, Computed properties a dynamické štýly vo Vue.js , sa zoznámime s tzv. Computed properties a naučíme sa stylovať komponenty a HTML elementy dynamicky.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.