Signup screen

Form-snippet.vue

<template>
<div>
  <div is="sui-container">
        <sui-grid>
            <sui-grid-row>     
                <sui-grid-column :width="7" class="centered" >
                    <sui-segment centered class="signup-div">
                        <sui-image :src="require('./../../assets/dummy-img.png')"  size="tiny" shape="circular" class="centered" />
                        <form is="sui-form" @submit="signupUser"> 
                            <div is="sui-form-field">                                
                                <input name="PCN ID" v-model="signupForm.pcn_id" v-validate="'required|alpha_num'" :class="{'input': true, 'has-error': errors.has('PCN ID') }" type="text" placeholder="PCN ID" required>
                               <span v-show="errors.has('PCN ID')" class="has-error">{{ errors.first('PCN ID') }}</span>
                            </div>
                            <div is="sui-form-field">                                 
                               <input name="First Name" v-model="signupForm.first_name" v-validate="'required|alpha'" :class="{'input': true, 'has-error': errors.has('First Name') }" type="text" placeholder="First Name" required>
                               <span v-show="errors.has('First Name')" class="has-error">{{errors.first('First Name') }}</span>
                            </div>
                           <div is="sui-form-field">                                
                                <input name="Last Name" v-model="signupForm.last_name" v-validate="'required|alpha'" :class="{'input': true, 'has-error': errors.has('Last Name') }" type="text" placeholder="Last Name" required>
                                <span v-show="errors.has('Last Name')" class="has-error">{{ errors.first('Last Name') }}</span>
                           </div>
                           <div is="sui-form-field">                                  
                                <input type="email" v-model="signupForm.email" name='email' v-validate="'required|email'" :class="{'input': true, 'input-error': errors.has('email') }" placeholder="Email Address" required/>
                                <span v-show="errors.has('email')" class="has-error">{{ errors.first('email') }}</span>
                            </div>
                           <div is="sui-form-field">                              
                                <input name="Phone Number" v-model="signupForm.phone" v-validate="'required|numeric'" :class="{'input': true, 'has-error': errors.has('Phone Number') }" type="tel" placeholder="Phone Number" required>
                                <span v-show="errors.has('Phone Number')" class="has-error">{{ errors.first('Phone Number') }}</span>
                            </div>
                            <div is="sui-form-field">  
                                <input name="password" v-model='signupForm.password' v-validate="'required|min:8'" :class="{'input': true, 'has-error': errors.has('password') }" type="password" placeholder="Password" required>
                                <span v-show="errors.has('password')" class="has-error">{{ errors.first('password') }}</span>
                            </div>
                            <div is="sui-form-field">
                                <input name="Confirm Password" v-validate="'required|confirmed:password'" :class="{'input': true, 'has-error': errors.has('Confirm Password') }" type="password" placeholder="Confirm Password" required>
                                <span v-show="errors.has('Confirm password')" class="has-error">{{ errors.first('Confirm Password') }}</span>
                            </div>
                            <button is="sui-button" type="submit" role="submit" name="submit" fluid class="orange-button" v-bind:disabled="errors.any()">Sign Up</button>
                            
                            <div is="sui-form-field" class="terms-wrap">Continuing means you accept
                                     our Terms & Privacy Policy
                            </div>
                            
                        </form>
                    </sui-segment>
                </sui-grid-column>
            </sui-grid-row>
        </sui-grid>        
    </div>
</div>  
</template>

<script>
// import axios from axios;

export default {
  name: "sign-up",
  data() {
    return {
      signupForm: {},
      loading: false
    };
  },
  methods: {
    signupUser(evt) {
      evt.preventDefault();
      const userDetails = `pcn-id=${this.signupForm.pcn_id}&first-name=${this.signupForm.first_name}&last-name=${this.signupForm.last_name}&email=${this.signupForm.email}&phone=${this.signupForm.phone}&password=${this.signupForm.password}&role=super-admin`;
      alert(userDetails)
    //   axios.post(`${BaseUrl}/signup?${userDetails}`)
    //   .then(response => {
    //       if(response.status){
    //           alert('failed to signup')
    //       }
    //       //add credentials to cookies/localStorage
    //   })
    //   .catch(error => {
    //       alert('Network Issue, Please try again later!')
    //   })
    }
  }
};
</script>

<style lang="scss" scoped>
.signup-div {
  min-height: 500px;
  padding: 40px 40px !important;
  margin-top: 30px !important;
  > .form {
    padding: 50px 30px;
    > .terms-wrap {
      text-align: center;
    }
  }
}
</style>

remove the preventDefault code, comment out line 67 and alert just some string lets see