我无法将我的 v-model 数据传递到我的后端以获取 vue.js 中的单选按钮类型，如何将选中的单选按钮值传递给我的后端？

Question

我开发了一个负责注册用户的页面，之前我提交的表单没有单选按钮，现在我需要根据选中的类型按钮添加单选按钮，该值应该发送到后端，我无法弄清楚我在哪里弄错了请帮我解决这个问题 Register.vue

<template>
<div class="main">
    <div v-if="flag==true" class="container">
        <img id="side-img" src="../assets/sideImg.png" alt="notFound" />
        <p id="side-content">Online Book Shopping</p>
        <div class="box">
            <div class="headings">
                <h5 class="signin" v-on:click="flip();" id="login" :class="{ active: isLogin }" @click="isLogin = true">Login</h5>
                <h5 class="signup" id="signup" :class="{ active: !isLogin }" @click="isLogin = false">signup</h5>
            </div>
            <form ref="myForm" @submit.prevent="handlesubmit">
                <div class="fullname">
                    <p>FullName</p>
                    <input type="name" id="name-input" class="namebox" required v-model="fullName" autocomplete="off" pattern="[A-Za-z]{3,12}">
                </div>
                <div class="username">
                    <p>EmailID</p>
                    <input type="email" id="Email-input" class="emailbox" autocomplete="off" required v-model="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
                </div>
                <div class="password-section">
                    <p>Password</p>
                    <input :type="password_type" class="password" :class="{'password-visible': isPasswordVisible }" id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$" required>
                    <i class="bi bi-eye-slash" id="togglePassword" @click="togglePassword();"></i>
                </div>
                <div class="mobile">
                    <p>MobileNumber</p>
                    <input type="tel" class="telephone" autocomplete="off" v-model="mobile" id="tel" pattern="^\d{10}$" required>
                </div>
               <div class="role-btns">
                    <input type="radio" id="user" value="user" name="role" v-model="roleUser" >
                    <label for="user" class="radio-label">user</label>
                    <input type="radio" id="admin" value="admin" name="role" v-model="roleUser">
                    <label for="admin">admin</label>
                </div>
                <button class="btn-section" id="btn" type="submit">Signup</button>
            </form>
        </div>
    </div>
    <Login v-if="flag==false" />
</div>
</template>

<script>

import service from '../service/User'
export default {
    name: 'Register',
    components: {
       Login: () => import('./Login.vue')
    },
    data() {
        return {
            fullName: '',
            email: '',
            password: '',
            mobile: '',
            roleUser:'',
            password_type: "password",
            isLogin: false,
            isPasswordVisible: false,
            flag: true,
            title: 'Online Book Shopping'
        }
    },
    methods: {
        flip() {
            this.flag = !this.flag;
        },
        togglePassword() {
            this.password_type = this.password_type === 'password' ? 'text' : 'password'
            this.isPasswordVisible = !this.isPasswordVisible
        },
        handlesubmit() {
            let userData = {
                fullName: this.fullName,
                email: this.email,
                password: this.password,
                mobile: this.mobile
            }
            service.userRegister(userData).then(response => {
                if (response.status == 201) {
                    alert("user registered successfully");
                    this.$refs.myForm.reset();
                    this.$router.push('/login');
                }
                return response;
            }).catch(error => {
                alert("invalid credentials");
                return error;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    @import "@/styles/Register.scss";
</style>

Answer 1

 let userData = {
                fullName: this.fullName,
                email: this.email,
                password: this.password,
                mobile: this.mobile,
                roleUser:this.roleUser
            }