Watch in Vue.js
In questa lezione parliamo di watch in Vue.js. I watchers in Vue.js consentono di eseguire del codice quando i dati reattivi cambiano. A differenza delle computed properties, i watchers non calcolano un valore; piuttosto, eseguono del codice quando si verificano specifiche modifiche di dati. Si possono utilizzare i watchers per eseguire azioni asincrone, effettuare chiamate AJAX o eseguire altre operazioni quando i dati cambiano.
Esempio Watch in Vue.js
Realizziamo un esempio di un componente Vue.js con un campo di input per inserire il raggio del cerchio e sotto un paragrafo che mostra dinamicamente l’area calcolata del cerchio utilizzando una watch property:
Raggio del cerchio:
L’area del cerchio è: {{ area }}
export default { name: ‘WatchComponent’, data() { return { radius: 0, area: 0 }; }, watch: { radius(newValue) { this.area = Math.PI * Math.pow(newValue, 2); } } };
Ho dunque inserito un campo di input per il raggio del cerchio, legato alla variabile radius tramite v-model, inizializzata a 0. Ho anche inizializzato la variabile area che compare in un paragrafo a 0. Dopo ho utilizzato un watcher per osservare i cambiamenti nella variabile radius. Ogni volta che radius cambia, il watcher
Continua la lettura su: https://www.codingcreativo.it/watch-in-vue-js/ Autore del post: Cristina Parma Fonte:
