Estoy usando Vue.js en mi aplicación y tengo una entrada de texto dentro de un formulario
<div id="myVueForm"> <form> <input type="text" v-on="keyup:addCategory | key 'enter'"> <!-- more form fields --> <button type="submit">Submit Form</button> </form> </div>En mi instancia de Vue tengo lo siguiente
new Vue({ el: '#myVueForm', methods: { addCategory: function(e) { if(e) e.preventDefault(); console.log("Added a new category, thanks!"); } } }); A pesar de la llamada a preventDefault() , cuando un usuario presiona enter mientras está ingresando texto, el formulario aún se envía (aunque el método addCategory() se activa). Este comportamiento se puede demostrar en este violín .
Sé que puedo usar jQuery para capturar el evento y evitar el envío, pero me gustaría ver si es posible hacer esto en Vue, ya que parece un uso bastante común.
Aquí hay una solución para Vue.js 2.x:
<input type='text' v-on:keydown.enter.prevent='addCategory' />El envío siempre se activa al pulsar el teclado. Entonces use keydown en lugar de keyup.
<input type="text" v-on="keydown:addCategory | key 'enter'">¿Por qué no deshabilitar el envío del formulario?
<form v-on:submit.prevent><input .../></form>