Gestion des événements
A noter
Voir la documentation vuejs Vue.js - Gestion des événements
Pour simplifier le code et les méthodes vuejs ajoute les modificateurs d'événements:
.stop .prevent .capture .self .once
par ex: <a v-on:click.stop.prevent="doThat"></a>
Et ajoute aussi les modificateurs du code des touches: .tab .delete .esc .space .up .down .left .right
comme ici:
<input v-on:keyup.enter="submit">
Custom events
L'exemple ci-dessous montre comment un événement d'un composant peut être récupéré par un composant parent.
On dispose d'un premier composant “simple-composant” qui est un champ de saisie texte et qui lance un événement 'simple-msg' quand l'utilisateur presse [enter]:
<template> <span> <input type="text" v-model="msg" @keyup.enter="sendEventMsg"/> </span> </template> <script> export default { data(){ return { msg: '' } }, methods:{ sendEventMsg: function(){ //déclenche un événement 'simple-msg' avec comme paramétre this.msg this.$emit('simple-msg', this.msg) this.msg = ''; } } } </script>
On crée un second composant utilisant mon simple-composant qui récupére l'événement simple-msg:
<template> <div class="aeris-mon-composant"> <ul> <li class="aeris-simple-li" v-for="msg in messages">{{msg}}</li> </ul> <simple-composant @simple-msg="addMsg"></simple-composant> </div> </template> <script> export default { data(){ return{ messages:[] } }, methods: { addMsg: function(event){ //REMARQUE: Les données passées à l'événement par simple-composant // se trouve dans le tableau event.detail this.messages.push(event.detail[0]); } }, } </script> <style> .aeris-mon-composant { display: block; } .aeris-mon-composant ul{ list-style-type: none; } li.aeris-simple-li{ display:table; } li.aeris-simple-li:before{ content:" \2192"; display: table-cell; padding: 0px 5px; } </style>