Javascript Vue表单未提交

我正试图提交一个包含数据的表单，以便获取获取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>

从“./components/Login.vue”导入登录名；
从“引导”导入引导；
从“axios”导入axios；
导出默认值{
名称：“应用程序”，
数据（）
{
返回{
错误：[]，
登录：[]
}
},
组成部分：{
登录
},
方法：{
提交登录（凭证）{
const{personelsnummer，wachtwoord}=凭证；
轴心柱http://localhost/api/apikey/', {
个人努默，
瓦赫特伍德
})
.then（res=>this.logins）
.catch（e=>{
此.errors.push（e）
})
}
}
}

My 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>

登录
导出默认值{
名称：“登录”，
数据（）{
返回{
PersonelsNummer:“，
wachtwoord:'
}
},
方法：{
物流测试（p，w）{
警报（“测试”）；
常量登录={
这个，
瓦赫特伍德：这个，瓦赫特伍德
}
//发送给家长
此.$emit（'loginformdata'，login）；
}
}
}

您正在将

submit

处理程序绑定到

div

上，该处理程序将永远不会工作，因为此元素首先没有该事件。您可以（也可能应该）在一个有事件的

表单上添加所有这些输入字段


登录

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


登录

从“Vue”导入Vue；
从“表单序列化”导入序列化；
新Vue({
el:“#应用程序”，
方法：{
逻辑测试（）{
//输出{personelsnummer:value，wachtwoord:value}
让数据=序列化（此.$refs.form{
哈希：对
});
//在这里处理数据
}
}
})
从
中删除提交，并添加单击事件
。或者使用
而不是

LOL