javascript 如何使用vue js在前端显示错误信息？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46970642/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-29 07:04:49 来源:igfitidea点击:
How to display error message in front end using vue js?
提问by Wanderer
This is my error message:
这是我的错误信息：
{message: "This username is already taken", status: false, error-type: 3, x-debug: [,…]}
My vue js code is
我的 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>
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?
我的 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>
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?
谁能告诉我如何显示该错误消息，对于每个输入，我都会收到错误消息。那么请帮助如何显示相同？
回答by Wouter Vandevelde
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 renderthe errors when needed like below:
只需将返回的错误放在您的 vue 数据中，并在需要时有条件地呈现错误，如下所示：
regBox = new Vue({
el: "#regBox",
data: {
username: 'Timmy',
phone: '0123456789',
email: '[email protected]',
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.
单击提交按钮以查看操作。
