我在使用vuejs @submit时遇到了一个问题。在我的登录表单中阻止。当我点击登录按钮时，它在我的网站上不起作用。我在函数中捕获了错误，但控制台仍然没有显示任何东西。请帮助。我想做的是，当点击表单时，它会将值提交给方法中的login()函数，它会调用我的laravel后端API来验证用户信息。
下面是以下代码:
<template>
<section class="container mt-3">
<div class="row content d-flex justify-content-center align-items-center">
<div class="col-md-5">
<div class="box shadow bg-white p-4">
<h3 class="mb-4 text-center fs-1">Login Form</h3>
<form @submit.prevent="login()" class="mb-3">
<div class="form-floating mb-3">
<input type="email" class="form-control rounded-0" v-model="form.email" id="floatingInput" placeholder="name@email.com">
<label for="floatingInput">Email</label>
</div>
<div class="form-floating ">
<input type="password" class="form-control rounded-0" v-model="form.password" id="floatingPassword" placeholder="password">
<label for="floatingPassword">Password</label>
</div>
<div class="form-check mb-3">
<input type="checkbox" id="autoSizingCheck2" class="form-check-input">
<label class="form-check-label">Remember me</label>
</div>
<div class="d-grid gap-2 mb-3">
<button type="button" class="btn btn-dark btn-lg border-0 rounded-0">
Login
</button>
</div>
<div class="forgot-password-link mb-3 text-right">
<router-link to="#" title="Forgot Password" class="text-decoration-none">
Forgot Passowrd?
</router-link>
</div>
<div class="forgot-password-link mb-3 text-right">
<router-link to="register" title="Forgot Password" class="text-decoration-none">
Don't have an accounts?
</router-link>
</div>
<div class="sign-up-accounts">
<p class="text-center">
Or Sign up with
</p>
<div class="social-accounts d-flex justify-content-center">
<a href="#" title="Facebook"><i class="fa fa-facebook"></i></a>
<a href="#" title="Facebook"><i class="fa fa-google"></i></a>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</template>
<script>
import store from '../store';
import router from '../router';
export default {
name:'Login',
data(){
return {
form:{
email:'',
password:''
},
}
},
methods: {
login() {
store.dispatch('login', this.form)
.then(res=>{
router.push('/');
}).catch(error=>{
console.log(error);
});
},
}
}
</script>
<style scoped>
</style>`````
Here is the store file:
state:{
user:{
data:{},
token:sessionStorage.getItem("Token"),
}
},
actions:{
login({commit}, user){
axiosClient.post('/login', {email:user.data.email, password:user.data.password})
.then(res=>{
console.log(res.data.token);
console.log(res);
res.data.email = user.email;
res.data.password = user.password;
commit('authUsers', res);
})
},
mutations:
authUsers: (state, userData)=> {
state.user.data = userData.data.email;
state.user.token = userData.data.token;
console.log(userData);
sessionStorage.setItem('Token', userData.data.token);
sessionStorage.setItem('Email', userData.data.email);
},
删除type="button"在登录按钮