如何使用 vue js 在前端显示错误消息？

Question

这是我的错误信息：

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

我的 vue js 代码是

 <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>

我的 HTML 代码如下所示。 这是我用来输入用户值的 HTML 代码。 那么，如何显示来自后端的错误消息？

 <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>

谁能告诉如何显示该错误消息，对于每个输入，我都会收到错误消息。 所以请帮助如何显示相同？

Answer 1

这是将响应放入数据中的方法：

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, "");
          }
      });
}

只需将返回的错误放入您的 vue 数据中，并在需要时有条件地呈现错误，如下所示：

 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>

单击提交按钮以查看实际情况。