无法通过在VUE 3中使用@submit提交表格

Question

我在登录表单中使用vuejs @submit.prevent遇到了一个问题。当我单击登录按钮时，它在我的网站中不起作用。我在功能中遇到了捕获错误，但控制台仍然什么也没显示。请帮忙。我要做的是当单击表单时，它将在方法中将值提交给我的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="[email protected]">
                        <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);
        },

Answer 1

登录按钮中的删除类型=“按钮”解决了此问题