javascript - 事件防止默认值在VueJS实例中不起作用

我试图在按下输入键时禁用表单提交。下面列出了我尝试过的方法以及代码和示例演示。

EXAMPLE OF PROBLEM HERE

所需结果:
专注于输入，按向下->向下->输入，它应该记录所选记录的索引并在此处停止。

实际发生的情况:
它按预期方式记录，但随后在表单提交时立即重新加载页面。

的HTML

<form action="/some-action" @submit.stop.prevent="prevent">
  <div class="auto-complete" v-cloak>
    <div class="ico-input">
      <input type="text" name="search" placeholder="Enter text" @keyup.prevent="handleKeypress">
    </div>
    <ul class="raw auto-complete-results">
      <li v-for="r in results" @click="loadSelection($index)" v-bind:class="{'selected': selectedIndex == $index}"><span>{{ r.name }}</span></li>
    </ul>
  </div>
</form>

JS

var autocomplete = new Vue({
  el: '.auto-complete',
  data: {
    results: [{name: 'swimming1'}, {name: 'swimming2'}, {name: 'swimming3'}, {name: 'swimming4'}, {name: 'swimming5'}, ],
    selectedIndex: -1,
  },
  methods: {
    handleKeypress: function(event) {
      event.preventDefault();
      event.stopPropagation();

      var key = event.which;

      if ([38, 40].indexOf(key) > -1) //handle up down arrows.
        this.arrowNavigation(key);

      else if (key == 13) //handle enter keypress
        this.loadSelection(this.selectedIndex);

      return false;
    },

    arrowNavigation: function(key, target) {
      if (key == 38) //up
        this.selectedIndex = this.selectedIndex - 1 < 0 ? 0 : this.selectedIndex - 1;
      if (key == 40) //down
        this.selectedIndex = (this.selectedIndex + 1) > (this.results.length - 1) ? 0 : this.selectedIndex + 1;
    },

    loadSelection: function(index) {

      if (index < 0 || index > this.results.length)
        return false;

      var selection = this.results[index];
      console.log("loading selection", index,selection);
    },

    prevent: function(event) {
      event.preventDefault();
      event.stopPropagation();
      return false;
    },
  }
})

我已经尝试了两种形式/输入的各种语法方法(在输入上将submit切换为keyup)

v-on:submit =“prevent”

@提交

@ submit.stop

@ submit.prevent

@ submit.stop.prevent =“prevent”

我也尝试过在2个事件处理程序中使用with调用以下内容，以及从这两个事件处理程序中都返回false。

event.preventDefault()

event.stopPropagation()

无论我如何尝试，该表单仍会触发页面重新加载。我看不到任何明显错误的内容，因此我转向stackoverflow进行引导。

谢谢

最佳答案

This Answer提出另一个问题，即无论您做什么，总是会提交带有单个输入元素的表单。

实际上，添加另一个输入(并将其隐藏)很有帮助。

https://jsfiddle.net/Linusborg/Lbq7hf1v/1/

<div class="ico-input">
  <input type="text" name="search" placeholder="Enter text" @keyup.prevent="handleKeypress">
  <input type="text" hidden style="display:none;">
</div>

浏览器很愚蠢。