Vue表单未提交答案

【问题标题】：Vue form not submittingVue表单未提交
【发布时间】：2019-01-21 09:17:11
【问题描述】：

我正在尝试提交包含数据的表单，以获取我需要用于获取 API 数据的 API 密钥。我在 Vue.js 中创建了一个表单，但是它没有提交我的表单。我是 Vue 的初学者，所以我不知道我做错了什么。非常感谢您的帮助。

我的应用程序.vue：

 <template>
  <div id="app">
   <Login @loginformdata="submitlogin"/>
  </div>
 </template>

 <script>
 import Login from './components/Login.vue';
 import Bootstrap from 'bootstrap';
 import axios from 'axios';


 export default {
   name: 'app',
   data()
   {
     return {
       errors: [],
       logins: []
   }
 },
 components: {
   Login
 },
 methods: {
   submitlogin(credentials){
   const {personeelsnummer, wachtwoord } = credentials;

   axios.post('http://localhost/api/apikey/', {
     personeelsnummer,
     wachtwoord
   })
   .then(res => this.logins)
   .catch(e => {
     this.errors.push(e)
   })
}
}
}
</script>

我的登录.vue：

 <template>
<div @submit="logintest">
    <h1>Login</h1>
    <input v-model="personeelsnummer" type="text" name="personeelsnummer" placeholder="personeelsnummer">&nbsp;
    <input v-model="wachtwoord" type="password" name="wachtwoord" placeholder="wachtwoord">
    <input type="submit" value="Submit">
</div>
</template>

<script>
export default {
name: "Login",
data() {
    return {
        personeelsnummer: '',
        wachtwoord: ''
    }
},
methods: {
    logintest(p, w){
        alert('test');
        const login = {
            personeelsnummer: this.personeelsnummer,
            wachtwoord: this.wachtwoord
        }
        //Send to parent
        this.$emit('loginformdata', login);
    }
}
 }
  </script>

【问题讨论】：

从<div @submit="logintest">删除提交，并添加点击事件<input @click="logintest" value="Submit">。
或者用<form @submit.prevent="loigntest">代替<div @submit="logintest">。
<div @submit> 哈哈

标签： javascript api vue.js frameworks axios

【解决方案1】：

您正在将 submit 处理程序绑定到 div 上，这将永远无法工作，因为该元素首先没有该事件。您可以（并且可能应该）做的是将所有这些输入字段添加到具有submit 事件的form 上。

<form @submit="logintest">
  <h1>Login</h1>
  <input v-model="personeelsnummer" type="text" name="personeelsnummer" placeholder="personeelsnummer">&nbsp;
  <input v-model="wachtwoord" type="password" name="wachtwoord" placeholder="wachtwoord">
  <input type="submit" value="Submit" />
</form>

此外，使用 Ajax 请求传递数据可能会变得乏味，尤其是当您有大量输入字段要序列化并随请求一起发送时，因此我建议为此使用 form-serialize。它支持两种输出格式，URL 编码（默认）或哈希（JS 对象）。

<div id="app">
  <form @submit="logintest" ref="form">
    <h1>Login</h1>
    <input type="text" name="personeelsnummer">&nbsp;
    <input type="password" name="wachtwoord">

    <!-- Imagine 10 more fields in here -->

    <input type="submit" value="Submit" />
  </form>
</div>

import Vue from 'vue';
import serialize from 'form-serialize';

new Vue({
  el: '#app',

  methods: {
    logintest() {
      // Outputs { personeelsnummer: value, wachtwoord: value }
      let data = serialize(this.$refs.form, {
        hash: true
      });

      // Do something with data here
    }
  }
})

【讨论】：