在进入VueJS / Semantic UI时阻止表单提交

Question

现在一直在寻找这个问题的解决方案2天，到目前为止，没有一个建议的解决方案有效。

我的表单html是用

定义的

<form id="quote_form" action="" method="get" class="ui large form">

并以

的形式输入文本字段

<input v-model="city" type="text" name="quote[city]" id="city">

我一直试图找出问题的原因，但未能这样做。我尝试关闭语义ui表单的键盘快捷键设置：

$('.ui.form').form({
  keyboardShortcuts: false
});

我还试图覆盖回车键并阻止它以这些方式触发提交功能：

$('#quote_form').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) {
    e.stopPropagation();
    e.preventDefault();
    return false;
  }
});

$(document).on("keypress", "form", function(event) {
  return event.keyCode != 13;
});

$('#quote_form').bind('keypress keydown keyup', function(e){
  if(e.keyCode == 13) { e.preventDefault(); }
});

表单有多个步骤填写。每个步骤都使用一个按钮来允许前进到下一步。按下Enter后，它会使表单重定向到表单的第一个步骤/选项卡。它不重定向的唯一情况是当不满足当前步骤的规则时。表单提交由提交按钮处理，按钮本身调用方法来验证和提交表单。我无法在输入提交行为和提交按钮之间找到任何关联。

如果我遗漏任何有用的信息以帮助找出原因，请告诉我。我是新来的，在这里提问，并希望尽可能避免我的问题被认为是坏的：）

Answer 1

只需在输入标记的末尾使用@ keyup.enter.prevent。见VueJS Doc

顺便说一句，你应该尝试使用原生的VueJS事件而不是用JQuery重做它

Answer 2

以下是您的解决方案：     @submit.prevent https://jsfiddle.net/4qpffycs/2/

Answer 3

我发现的解决方案仅针对不带VueJS的语义UI，但应在此处适用，并对该问题有所了解。

问题是由于$("#formId").form({ ... })注册了按钮按下事件处理程序，并且如果选择了输入框之一而在Enter Enter上提交了表单。选择元素并选择“事件监听器”类别时，可以在Chrome DevTools中看到这一点：

我发现删除此行为的最简单方法是致电

$("#formId").unbind('keydown')

完全从元素中删除keydown绑定。