Intercettare gli eventi: gestione dello stato con METHODS in VUE

Come avviene la gestione degli eventi in VUE? Un evento è quando succede qualcosa come cliccare per la prima volta su una risorsa, magari trascinare quella risorsa senza rilasciare il mouse e infine rilasciare il mouse per finire il trascinamento. Nel nostro caso noi vogliamo che quando clicchiamo sul campo INPUT o casella di testo succeda qualcosa. Questo in VUE è facilmente gestibile utilizzando i METODI che nella gestione dello stato si colloca dopo la dichiarazione dei dati. I metodi possono essere usati quindi in risposta a un determinato evento. Quindi impostiamo un metodo che verrà chiamato ogni volta che l’utente scriverà dentro il campo INPUT. Come fare quindi? Analizziamo questo esempio, prendiamo ad esempio il file JS citato nella seconda lezione introduttiva su VUE all’ indirizzo https://www.umbriaway.eu/2020/03/25/vue-js-framework-e-la-gestione-degli-stati/ e aggiungiamo un nuovo blocco di istruzioni nel nostro oggetto relativamente ai METHODS:

new Vue({
el: ‘.todoapp’,
data: {
todos: [{
title:”Shopping!”
},{
title:”Video Corso”
},{
title:”Lavare i piatti”
}],
},
methods: {
allOk() {
console.log(“It’s all ok!”);
},
handleEvent(event) {
this.allOk();
}
}
});

a questo punto però abbiamo bisogno di collegare l’evento al nostro campo input perchè abbiamo detto che il nostro obiettivo è fare in modo che quando qualcuno scriva nel campo testo succeda qualcosa, lo si ottiene andando sulla pagina principale HTML presente all’ indirizzo https://www.farwebdesign.com/vue/app/ in VUE detta anche SPA (single page application) e modificando la riga statica con la direttiva chiocciola che richiama i metodi quindi il tutto diventa dinamicamente:

<input @input=”handleEvent” class=”new-todo” autofocus autocomplete=”off” placeholder=”What needs to be done?”>

A questo punto se apriamo la nostra finestra sviluppatori con F12 per aprire la finestra CONSOLE che ci serve per verificare se davvero tutto funziona ci accorgeremo che quando tenteremo di scrivere qualcosa all’ interno del campo testo automaticamente viene generato un evento di scrittura automatica sulla console che è l’equivalente di It’s all ok! Ovviamente abbiamo vari modo di intercettare questi eventi click da parte dell’ interazione portata dall’ utente. Vediamo ad esempio una piccola modifica al nostro codice:

new Vue({
el: ‘.todoapp’,
data: {
todos: [{
title:”Shopping!”
},{
title:”Video Corso”
},{
title:”Lavare i piatti”
}],
},
methods: {
handleEvent(event) {
console.log(event.target.value);
// le singole lettere verranno catturate da console e stampate
}
}
});

per accedere ai dati direttamente potrei anche scrivere:

methods: {
handleEvent(event) {
console.log(this.todo[0].title);
// interagiamo con i dati della nostra applicazione, catturando il titolo del primo elemento
}
}

Nel prossimo appuntamento analizzeremo i cicli di vita sempre contestualmente alla gestione dello stato in VUEJS.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...