Question

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

我的App.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>

我的Login.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>

Answer 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
    }
  }
})

Vue表单未提交

1 个答案: