我有一个以下组件,其中有一个更新员工的方法。我想在 ajax 调用的“错误”回调中分配/更改 erroMessage 变量后立即在视图中显示错误消息。
var EmployeeEdit = Vue.extend({
template: '#employee-edit',
data: function () {
return {employee: findEmployee(this.$route.params.employee_id),errorMessage:'as'};
},
methods: {
updateEmployee: function () {
var employee = this.employee;
$.ajax({
url: "/vue/employee/update",
type: "POST",
data:{
id: employee.id,
name: employee.name,
profile: employee.profile,
age: employee.age
},
success: function (data) {
router.push('/');
},
error:function (xhr, status, error) {
console.log("message....... " + xhr.responseText);
this.errorMessage = xhr.responseText;
}
});
}
View:
<template id="employee-edit">
<section>
<header class="page-header">
<div class="row">
<div class="col-sm-4">
<h1>Edit Employee</h1>
</div>
</div>
</header>
<p >{{ errorMessage }}</p>
<form v-on:submit="updateEmployee">
<div class="form-group">
<label for="edit-name">Name</label>
<input class="form-control" id="edit-name" v-model="employee.name" required/>
</div>
<div class="form-group">
<label for="edit-description">Profile</label>
<textarea class="form-control" id="edit-description" rows="3" v-model="employee.profile"></textarea>
</div>
<div class="form-group">
<label for="edit-price">Age</label>
<input type="number" class="form-control" id="edit-price" v-model="employee.age"/>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<router-link to="/" class="btn btn-default">Cancel</router-link>
</form>
</section>
</template>
因为你失去了this
参考文献error:function(){}
您可以使用箭头函数:
error: (xhr, status, error) => {
console.log("message....... " + xhr.responseText);
this.errorMessage = xhr.responseText;
}
或者如果你不想使用ES6,你可以指定context
选项中$.ajax()
$.ajax({
context: this,
...
或者只是保留一个this
参考
updateEmployee: function () {
var _this = this;
...
error: function (xhr, status, error) {
console.log("message....... " + xhr.responseText);
_this.errorMessage = xhr.responseText;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)