在Vue js

Question

中顯示錯誤消息我有一個以下組件，其中有一個更新員工的方法。只要erroMessage變量在ajax調用的「錯誤」回調中被分配/更改，我想在錯誤消息中顯示。

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

     } 

查看：

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

Answer 1

因爲你失去了在error:function(){}

的this參考您可以使用箭頭功能：

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

，或者如果你不想使用ES6，您可以在中指定context選項

$.ajax({ 
    context: this, 
    ... 

或者乾脆保持this參考

updateEmployee: function() { 
    var _this = this; 

... 

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