title: How to display error message in front end using vue js?
body: <p>This is my error message:</p>
  
  <pre><code>     {message: "This username is already taken", status: false, error-type: 3, x-debug: [,…]}
  </code></pre>
  
  <p>My vue js code is</p>
  
  <pre><code> &lt;script&gt;
        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;
  }
  },
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>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?</p>
  
  <pre><code> &lt;div class="tab-pane" id="Registration"&gt;
                              &lt;form id="regBox" method="POST" class="form-horizontal" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);"&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="email" class="col-sm-2 control-label"&gt;
                                      Name&lt;/label&gt;
                                  &lt;div class="col-sm-10"&gt;
                                       &lt;input name="username" type="text" class="form-control" id="name" placeholder="Name" required="required" v-model="username" data-parsley-minlength="4"/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="email" class="col-sm-2 control-label"&gt;
                                      Email&lt;/label&gt;
                                  &lt;div class="col-sm-10"&gt;
                                      &lt;input name="email" type="email" class="form-control" id="email" placeholder="Email" required="required" v-model="email" /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="mobile" class="col-sm-2 control-label"&gt;
                                      Mobile&lt;/label&gt;
                                  &lt;div class="col-sm-10"&gt;
                                      &lt;input name="phone" type="number" class="form-control" id="mobile" placeholder="Mobile" data-parsley-pattern="^\d{10}$" required="required" v-model="phone"/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="password" class="col-sm-2 control-label"&gt;
                                      Password&lt;/label&gt;
                                  &lt;div class="col-sm-10"&gt;
                                      &lt;input name="password" type="password" class="form-control" id="password" placeholder="Password" required="required" v-model="password"/&gt;
                                  &lt;/div&gt;   
                              &lt;/div&gt;
                                &lt;div class="form-group"&gt;
                                  &lt;label for="confirmpassword" class="col-sm-2 control-label"&gt;
                                      Confirm Password&lt;/label&gt;
                                  &lt;div class="col-sm-10"&gt;
                                      &lt;input name="confirm_password" type="password" class="form-control" id="confirm_password" placeholder="Password" required="required" v-model="confirm_password"/&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>