Usare i wathcers in Vue.js

I watchers in Vue.js ci consentono di verificare quando un determinato valore è cambiato.

Per fare questo controllo ci basta usare watch!

Partiamo da una variabile che ha valore iniziale zero, e che viene aggiornata da una chiamata ad una API remota.

Quando la chiamata finisce, e la variabile viene valorizzata, allora parte il watch in automatico.

Ecco un esempio di codice:

export default {
  data() {
    return {
      watchTotQta: 0,
  },
  watch: {
    watchTotQta: function (val) {
      console.log('TOT QTA AGGIORNATO: ' + val);
      if (val > 1000) {
        console.log('BENE CONTINUA COSÌ!');
      }
    }
  },
  created() {
    this.allService = new AllenamentiService();
  },
  mounted() {
    this.getAllenamenti();
  },
  methods: {
    getAllenamenti() {
      this.allService.getAll().then(data => {
        this.watchTotQta = data.length;
      });
    }
  }
}

AllenamentiService è un service per interrogare l'API; ovviamente voi avrete i vostri servizi.

Ma la sostanza è la stessa.

Come vedete basta impostare il watch, e lui farà tutto in automatico.

Enjoy!