How to display error message in front end using vue js?

Question

This is my error message:

     {message: "This username is already taken", status: false, error-type: 3, x-debug: [,…]}

My vue js code is

 <script>
      regBox = new Vue({
el: "#regBox",
  data: {
   username : '',
   phone : '',
   email : '',
   password: '',
   confirm_password : ''
  },
  methods: {
     handelSubmit: function(e) {
           data = {};
           data['username'] = this.username;
           data['email'] = this.email;
           data['phone'] = this.phone;
           data['password'] = this.password;
           data['confirm_password'] = this.confirm_password;
            $.ajax({
              url: 'https://herokuapp.com/api/user/reg/',
              data: data,
              type: "POST",
              dataType: 'json',
              success: function(e) {
              if (e.status)
               alert("Registration Success")
              else {
                alert("failed to Register!");
              }
          }
            });
            return false;
}
},
});
</script>

My HTML code is showing below. This is the HTML code I am used to inputting the values from the user. So, how can I display the error messages from the backend?

 <div class="tab-pane" id="Registration">
                            <form id="regBox" method="POST" class="form-horizontal" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
                            <div class="form-group">
                                <label for="email" class="col-sm-2 control-label">
                                    Name</label>
                                <div class="col-sm-10">
                                     <input name="username" type="text" class="form-control" id="name" placeholder="Name" required="required" v-model="username" data-parsley-minlength="4"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="email" class="col-sm-2 control-label">
                                    Email</label>
                                <div class="col-sm-10">
                                    <input name="email" type="email" class="form-control" id="email" placeholder="Email" required="required" v-model="email" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="mobile" class="col-sm-2 control-label">
                                    Mobile</label>
                                <div class="col-sm-10">
                                    <input name="phone" type="number" class="form-control" id="mobile" placeholder="Mobile" data-parsley-pattern="^\d{10}$" required="required" v-model="phone"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password" class="col-sm-2 control-label">
                                    Password</label>
                                <div class="col-sm-10">
                                    <input name="password" type="password" class="form-control" id="password" placeholder="Password" required="required" v-model="password"/>
                                </div>   
                            </div>
                              <div class="form-group">
                                <label for="confirmpassword" class="col-sm-2 control-label">
                                    Confirm Password</label>
                                <div class="col-sm-10">
                                    <input name="confirm_password" type="password" class="form-control" id="confirm_password" placeholder="Password" required="required" v-model="confirm_password"/>
                                </div>

                            </div>

Can anybody tell how to display that error message, For each input, I am getting error messages . So please help how to display the same?

Answer 1

This is how to place the response in your data:

handelSubmit: function(e) {
      var self = this;
      data = {};
      data['username'] = this.username;
      data['email'] = this.email;
      data['phone'] = this.phone;
      data['password'] = this.password;
      data['confirm_password'] = this.confirm_password;
      $.ajax({
          url: 'https://herokuapp.com/api/user/reg/',
          data: data,
          type: "POST",
          dataType: 'json',
          success: function (msg, status) {
              self.errors.username = JSON.stringify(msg).replace(/\"/g, "");
          }
      });
}

Just place the returned errors in your vue data and conditionally render the errors when needed like below:

regBox = new Vue({
  el: "#regBox",
  data: {
    username: 'Timmy',
    phone: '0123456789',
    email: 'Timmy@something.com',
    password: 'secret',
    confirm_password: 'secret',
    errors: {
        username: '',
        phone: ''
    }
  },
  methods: {
    handelSubmit: function(e) {
      var self = this;
      data = {};
      data['username'] = this.username;
      data['email'] = this.email;
      data['phone'] = this.phone;
      data['password'] = this.password;
      data['confirm_password'] = this.confirm_password;
      // Ajax call
      var response = { errors: {} };
      response.errors.username = { message: "This username is already taken", status: false, errorType: 3, xDebug: '[,…]'};
      this.errors.username = JSON.stringify(response.errors.username).replace(/\"/g, "");
    }
  },
});

.error {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>
<div class="tab-pane" id="Registration">
  <form id="regBox" method="POST" class="form-horizontal" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
    <div class="form-group">
      <label for="email" class="col-sm-2 control-label">Name</label>
      <div class="col-sm-10">
        <input name="username" type="text" class="form-control" id="name" placeholder="Name" required="required" v-model="username" data-parsley-minlength="4" />
        <p class="error" v-if="errors.username">{{ errors.username }}</p>
      </div>
    </div>
    <div class="form-group">
      <label for="email" class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
        <input name="email" type="email" class="form-control" id="email" placeholder="Email" required="required" v-model="email" />
      </div>
    </div>
    <div class="form-group">
      <label for="mobile" class="col-sm-2 control-label">Mobile</label>
      <div class="col-sm-10">
        <input name="phone" type="number" class="form-control" id="mobile" placeholder="Mobile" data-parsley-pattern="^\d{10}$" required="required" v-model="phone" />
      </div>
    </div>
    <div class="form-group">
      <label for="password" class="col-sm-2 control-label">Password</label>
      <div class="col-sm-10">
        <input name="password" type="password" class="form-control" id="password" placeholder="Password" required="required" v-model="password" />
      </div>
    </div>
    <div class="form-group">
      <label for="confirmpassword" class="col-sm-2 control-label">Confirm Password</label>
      <div class="col-sm-10">
        <input name="confirm_password" type="password" class="form-control" id="confirm_password" placeholder="Password" required="required" v-model="confirm_password" />
      </div>

    </div>
    <input type="submit">
    </form>
</div>

Click the submit button to see in action.