Impedir o envio de formulários ao pressionar enter a partir de uma entrada de texto, usando o Vue.js
Estou usando o Vue.js no meu aplicativo e tenho uma entrada de texto em um formulário
<div id="myVueForm">
<form>
<input type="text" v-on="keyup:addCategory | key 'enter'">
<!-- more form fields -->
<button type="submit">Submit Form</button>
</form>
</div>
Na minha instância do Vue, tenho o seguinte
new Vue({
el: '#myVueForm',
methods: {
addCategory: function(e)
{
if(e) e.preventDefault();
console.log("Added a new category, thanks!");
}
}
});
Apesar dapreventDefault();
chamada, quando um usuário pressiona enter enquanto estiver na entrada de texto que o formulário ainda envia (embora oaddCategory()
método dispara). Esse comportamento pode ser demonstrado emesse violino.
Sei que posso usar o jQuery para capturar o evento e impedir o envio, mas gostaria de ver se é possível no Vue fazer isso, pois parece um uso bastante comum.