Estoy aprendiendo Vue.js. En mi Vue, tengo un campo de texto y un botón. De forma predeterminada, este botón envía un formulario cuando alguien presiona la tecla Intro en su teclado. Cuando alguien está escribiendo en el campo de texto, quiero capturar cada tecla presionada. Si la clave es un símbolo '@', quiero hacer algo especial. Si la tecla presionada es la tecla "Enter", también quiero hacer algo especial. Este último es el que me da desafíos. Actualmente, tengo este Fiddle , que incluye este código:
new Vue({ el: '#myApp', data: { emailAddress: '', log: '' }, methods: { validateEmailAddress: function(e) { if (e.keyCode === 13) { alert('Enter was pressed'); } else if (e.keyCode === 50) { alert('@ was pressed'); } this.log += e.key; }, postEmailAddress: function() { this.log += '\n\nPosting'; } }); En mi ejemplo, parece que no puedo presionar la tecla "Enter" sin enviar el formulario. Sin embargo, esperaría que la función validateEmailAddress se active al menos primero para poder capturarla. Pero, eso no parece estar sucediendo. ¿Qué estoy haciendo mal?
En vue 2, puede capturar el evento enter con v-on:keyup.enter verifique la documentación:
Os dejo un ejemplo muy sencillo :
var vm = new Vue({ el: '#app', data: {msg: ''}, methods: { onEnter: function() { this.msg = 'on enter event'; } } }); <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> <input v-on:keyup.enter="onEnter" /> <h1>{{ msg }}</h1> </div>Buena suerte
Puede consultar los modificadores de eventos en vuejs para evitar el envío de formularios con la tecla enter .
Es una necesidad muy común llamar a
event.preventDefault()oevent.stopPropagation()dentro de los controladores de eventos.Aunque podemos hacer esto fácilmente dentro de los métodos, sería mejor si los métodos pudieran ser puramente de lógica de datos en lugar de tener que lidiar con detalles de eventos DOM.
Para abordar este problema, Vue proporciona modificadores de eventos para
v-on. Recuerde que los modificadores son sufijos de directiva indicados por un punto.
<form v-on:submit.prevent="<method>"> ... </form> Como dice la documentación, esto es azúcar sintáctico para e.preventDefault() y detendrá el envío de formularios no deseados al presionar la tecla Intro.
Aquí hay un violín que funciona.
new Vue({ el: '#myApp', data: { emailAddress: '', log: '' }, methods: { validateEmailAddress: function(e) { if (e.keyCode === 13) { alert('Enter was pressed'); } else if (e.keyCode === 50) { alert('@ was pressed'); } this.log += e.key; }, postEmailAddress: function() { this.log += '\n\nPosting'; }, noop () { // do nothing ? } } }) html, body, #editor { margin: 0; height: 100%; color: #333; } <script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script> <div id="myApp" style="padding:2rem; background-color:#fff;"> <form v-on:submit.prevent="noop"> <input type="text" v-model="emailAddress" v-on:keyup="validateEmailAddress" /> <button type="button" v-on:click="postEmailAddress" >Subscribe</button> <br /><br /> <textarea v-model="log" rows="4"></textarea> </form> </div>Este evento me funciona:
@keyup.enter.native="onEnter".