La Gestione Eventi di Vue.Js è molto ricca di sfaccettature, per cercare di capirne alcuni aspetti la cosa migliore è mostrare tutto lato codice.
Aggiungiamo un tag a semplice e banale che si dovrà occupare del salvataggio in base dati del nostro title.
Andremo a “metterci in ascolto” dell’evento click e lo faremo richiamando quindi la funzione saveElement. Sappiamo già farlo tutto questo e lo faremo così:
<a href=”/” @click=”saveElement”> Save </a>
saveElement: function () {
setTimeout(() => {
alert(‘salvataggio avvenuto correttamente’);
}, 700)
},
La nostra funzione inserita tra i methods non farà altro che simulare una chiamata tramite setTimeout… ma questa procedura non funzionerà sai perché?
Abbiamo bisogno di un preventDefault, altrimenti il link reindirizzerà la nostra pagina.
Quindi dobbiamo annullare l’azione di default. Potremmo farlo all’interno della nostra funzione, ma in maniera molto più immediata possiamo farlo direttamente dalla nostra direttiva in questo modo:
<a href=”/” @click.prevent=”saveElement($event)”>
Save
</a>
Questi si chiamano modificatori di eventi e ce ne sono di diversi tipi, possiamo anche applicarli congiuntamente e quindi aggiungendo anche uno stop propagation in questo modo
<a href=”/” @click.stop.prevent=”saveElement($event)”>
Possiamo anche attivare un evento alla pressione di un determinato tasto: proviamo a testarlo con la pressione del tasto invio nell’input facendo in modo che la pressione di questo tasto faccia scattare il salvataggio:
<input type=”text” @keyup.enter=”saveElement” v-bind:value=”title” @input=”changeTitle”>
Chiaramente possiamo utilizzare anche il codice numerico in questo modo:
<input type=”text” @keyup.13=”saveElement” v-bind:value=”title” @input=”changeTitle”>
Ma se volessimo passare dei parametri a una funzione? Immaginiamo che vogliamo gestire diversamente i due eventi che chiamano saveElement, vogliamo che alla pressione del tasto invio venga resettato il campo di input, mentre al click sul tag a no.
Dovremmo quindi passargli un true/false, un boolean.
<input type=”text” @keyup.enter=”saveElement(true)” v-bind:value=”title” @input=”changeTitle”>
<a href=”/” @click.stop.prevent=”saveElement(false)”>Save
</a>
saveElement: function (reset) {
setTimeout(() => {
alert(‘salvataggio avvenuto correttamente’);
if(reset)
this.title = ”;
}, 700)
},
Quindi alla funzione passeremo una proprietà true/false che farà in modo che le cose siano gestite in modo diverso.
Ora quindi alla pressione del tasto “invio” il campo verrà anche resettato (altrimenti cliccando su “salva” non verrà resettato).
Questo è un problema se noi dovessimo gestire e anche l’evento, infatti quest’ultimo ci viene passato in automatico – come primo parametro da Vue.js – ma noi lo stiamo comunque sovrascrivendo.
Per poter avere anche l’evento lo dobbiamo passare pertanto tramite la variabile $event, in questo modo
<input type=”text” @keyup.enter=”saveElement($event, true)” v-bind:value=”title” @input=”changeTitle”>
<a href=”/” @click.stop.prevent=”saveElement($event)”>
Save
</a>
saveElement: function (event, reset) {
console.log(event);
setTimeout(() => {
alert(‘salvataggio avvenuto correttamente’);
if(reset)
this.title = ”;
}, 700)
},
In questo modo avremo come primo parametro l’evento e come secondo parametro il true/false
Corso Custom per aziende Vue.js
