Javascript 在Vue js中显示错误消息

Javascript 在Vue js中显示错误消息,javascript,vue.js,Javascript,Vue.js,我有一个下面的组件,其中我有一个更新employee的方法。我想在ajax调用的“error”回调中分配/更改erroMessage变量后立即显示错误消息 var EmployeeEdit = Vue.extend({ template: '#employee-edit', data: function () { return {employee: findEmployee(this.$route.params.employee_id),errorMessage:

我有一个下面的组件,其中我有一个更新employee的方法。我想在ajax调用的“error”回调中分配/更改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;
                }
            });

        }
视图:


编辑员工
{{errorMessage}

名称 轮廓 年龄 拯救 取消
因为您在
错误:function(){}

您可以使用箭头功能:

error: (xhr, status, error) => {
  console.log("message....... " + xhr.responseText);
  this.errorMessage = xhr.responseText;
}
或者,如果不想使用ES6,可以在
$.ajax()中指定
上下文
选项

或者只需保留一个
参考

updateEmployee: function () {
  var _this = this;

...

  error: function (xhr, status, error) {
    console.log("message....... " + xhr.responseText);
    _this.errorMessage =  xhr.responseText;
  }

查看代码在哪里?添加了查看代码
$.ajax({
  context: this,
  ...
updateEmployee: function () {
  var _this = this;

...

  error: function (xhr, status, error) {
    console.log("message....... " + xhr.responseText);
    _this.errorMessage =  xhr.responseText;
  }