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

Posted 2023-02-16

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

【英文标题】：I am unable to pass my v-model data to my backend for radio button type in vue.js ,How to pass that checked radio button value to my backend ??

【发布时间】：2021-09-17 18:53:26

【问题描述】：

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

<template>
<div class="main">
    <div v-if="flag==true" class="container">
        <img id="side-img" src="../assets/sideImg.png"  />
        <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="^\d10$" 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>

【问题讨论】：

你不见了roleUser:this.roleUser。

@skr，是的，我刚刚收到了东西，谢谢你的建议

【参考方案1】：

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

【讨论】：

请描述您的代码并添加原因，为什么它应该有帮助