Vaše spolehlivé vývojářské oddělení

#4 Computed a Watch

15.04.2019

V minulém díle jsme se podívali na data a metody. Dalšími užitečnými vlastnostmi Vue instance jsou Computed a Watch. K čemu slouží a jak je správně využít si řekneme právě v tomto díle.

Computed

Pokud bychom vypisovali například jméno a příjmení pouze pomocí dat, mohlo by vypsání vypadat následovně.

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

  <div id="app">
    {{ name }} {{ surname }}
  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
          name: "David",
          surname: "Krupička"
      }
    });
  </script>
</body>
</html>

V případě, že máme data která chceme “vypočítat” z jiných dat, můžeme využít právě computed. Například pro spojení jména a příjmení do jednoho by mohl vypadat kód následovně.

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    {{ nameSurname }}
  </div>

  <script>
  new Vue({
    el: "#app",
    data: {
        name: "David",
      surname: "Krupička"
    },
    computed: {
        nameSurname: function(){
           return this.name + ' ' + this.surname;
      }
    }
  });
  </script>
</body>
</html>

I zde zafunguje správně reaktivní systém. Pokud změníte jméno nebo příjmení, tak se výsledek promítne do nameSurname. Zde jsme computed využili pro jednoduché spojení jména a příjmení. Computed ve Vue.js můžete využít například pro doplnění měny za cenu nebo jiné formátování textu.

Na příkladu také vidíte jak lze přistupovat k datům Vue instance. Je to pomocí klíčového slova this a tečkové notace. Computed bychom měli využívat k snížení výskytu logiky v HTML.

Watch

Může se stát, že chceme měnit nějaká data v závislosti na změně jiných dat. Například budeme chtít do console zalogovat každou změnu jména. Použití může vypadat jako na následujícím příkladu.

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    {{ name }}
    <button v-on:click="changeName">
      Změnit jméno
    </button>
  </div>
</body>
<script>
  new Vue({
      el: "#app",
    data: {
        name: "David"
    },
    methods: {
        changeName: function(){
          this.name = 'Změna';
      }
    },
    watch: {
        name: function(){
           console.log(this.name);
      }
    }
  });
</script>
</html>

V příkladu bylo přidáno tlačítko a metoda changeName. Po kliknutí na tlačítko se volá tato metoda, která pouze změní hodnotu data name. Watcher pro sledování dat name obsahuje funkci, která se provede vždy, když watcher zaznamená změnu hodnoty name


Komentáře

Žádne komentáře

Zanechte komentář


Facebook Nenechte si ujít žádnou novinku a sledujte nás na Facebooku.

Tento web používá k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte.
V pořádku Další informace

Nenašli jste co jste hledali?