SignUp.vue

<template>
    <div class="signup">
        <h1>Sign Up</h1>
        <div class="signUpInput">
            <input type="text" v-model="uid" placeholder="User ID">
        </div>
        <div class="signUpInput">
            <input type="text" v-model="password" placeholder="Password">
        </div>
        <div class="signUpInput">
            <input type="text" v-model="email" placeholder="Email">
        </div>
        <div class="signUpInput">
            <input type="text" v-model="phone" placeholder="Phone">
        </div>
        <div class="signUpInput">
            <input type="text" v-model="univ" placeholder="Univ">
        </div>
        <div class="signUpInput">
            <input type="text" v-model="department" placeholder="Department">
        </div>
        <div class="signUpInput">
            <input type="text" v-model="sid" placeholder="Student ID">
        </div>
        <div id="selected">
        <select v-model="ifsuper" id="ifSuper" required="required">
            <option value=0>Club Member</option>
            <option value=1 >Club Manager</option>
        </select><br>
        </div>
        <button v-on:click="btnSignUp">SignUp</button>
        {{ifsuper}}
    </div>
</template>

<script>
export default {
    name: 'signup',
    data() {
        return {
            valid: false,
            textLimit: 30,
            uid: '',
            password: '',
            email: '',
            phone: '',
            univ: '',
            department: '',
            sid: '',
            ifsuper: 0,
        }
    },
    methods: {
        async btnSignUp(){
            if(this.uid == '' || this.password == ''){
                alert('input Your Id & Pwd');
            }else if(!this.sid_valid){
                alert('plz input Number in StudentId');
            } else {
                const res = await this.$http.post('http://jnhonlinux.ddns.net:3000/signup', { 
                    'uid': this.uid,
                    'password': this.password,
                    'email': this.email,
                    'phone': this.phone,
                    'univ': this.univ,
                    'department': this.department,
                    'sid': this.sid,
                    'ifsuper': this.ifsuper
                });
                if(res.data.success == true) {
                    alert('Go to Login');
                    this.$router.push('/login');
                }
            }
        }
    },
    computed: {
        sid_valid: function() {
            if(!isNaN(this.sid)){
                return true
            } else {
                return false
            }
        }
    }
}
</script>

<style>
.signUpInput input{
    border: none;
    outline: none;
    background: none;
    color: black;
    font-size: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid #4caf50;  
}
#ifSuper{
    width: 220px;
    height: 41px;
    font-size: 15px;
    color: black;
}
select::-ms-expand { opacity: 0;}
</style>