Question

我的表格看起来像这样：

<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上提交？我的目标是通过将onSubmit发送到服务器，通过inputval执行ajax调用。

Answer 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添加到您的依赖项中，然后将其导入到文件中。

VueJS阻止提交表单提交并在keyup上提交表单

1 个答案: