VueJS 防止在提交时提交表单并在 keyup 上提交表单答案

【问题标题】：VueJS prevent form submission on submit and submit the form on keyupVueJS 防止在提交时提交表单并在 keyup 上提交表单
【发布时间】：2018-04-02 08:01:29
【问题描述】：

我有一个如下所示的表单：

<form id="myForm" action="/searchuser" method="POST" @submit.prevent="onSubmit(inputValue)">
   <div class="field">
      <label class="label">Name</label>
      <div class="control">
         <input class="input" type="text" placeholder="Text input" v-model="inputValue" @keyup="onKeyUp" @blur="inputFocused = false">
         <ul v-if="inputFocused">
            <li v-for="value in values"><a class="panel-block is-primary" :href="value.link">@{{value.title}}</a></li>
         </ul>
      </div>
   </div>
</form>

在我的 JavaScript 中，我有两个方法 onSubmit 和 onKeyPress：

<script>
export default {
  data() {
    return {
      inputValue: "",
      inputFocused: false,
      values: [
        { title: "facebook", link: "http://facebook.com" },
        { title: "twitter", link: "http://twitter.com" },
        { title: "gplus", link: "http://plus.google.com" },
        { title: "youtube", link: "http://youtube.com" }
      ]
    };
  },
  methods: {
    onKeyUp: function() {
      document.forms["myForm"].submit();
      this.inputFocused = true;
    },
    onSubmit: function(inputval) {
      console.log(inputval);
    }
  }
};
</script>

我想要实现的是当用户按下一个键时，我希望提交表单，但我不希望页面被重定向到/searchuser 路由。但是，只要我按下一个键，即使我使用 prevent 修饰符来阻止提交，页面也会被重定向。如何防止它被重定向并仅在 keyup/keydown 上提交？我的目标是通过将inputval 发送到服务器来通过onSubmit 执行ajax 调用。

【问题讨论】：

标签： javascript ajax forms vue.js

【解决方案1】：

Vue 不会覆盖 DOM 默认行为，如果您决定这样做的话在绕过 vue 机制的同时直接访问 DOM API（例如 document.forms)
如果你想提交一个没有重定向的表单，你必须这样做 ajax 请求。
你必须使用axios（我个人的选择）。因为您尝试直接提交表单...为了跟上默认的表单提交数据格式，我假设您需要将数据序列化为application/x-www-form-urlencoded format。 check the docs。

查看代码：

onKeyUp 方法：

onKeyUp: function() {
  axios.post("/searchuser", qs.stringify({ inputValue: inputValue }));
  this.inputFocused = true;
},

记得使用 npm 将 axios 和 qs 添加到您的依赖项中，并将它们导入文件中。

【讨论】：