Невозможно установить свойство внутри обещания Axios в Vue JS

Question

Я пытаюсь использовать VueJS и Axios, чтобы сделать HTTP-запрос к серверу Laravel, чтобы получить JSON, а затем использовать JSON для обновления свойства errorMessage на моем компоненте ,

  Axios.post('/api/login', { 
       email: this.email, 
       password: this.password 
      }).then((response) => { 
       this.errorMessage = response.message; 
      }).catch((error) => { 
       console.error(error); 
      }) 

Проблема заключается в том, что он не в состоянии ссылаться this.errorMessage по какой-то причине, я делаю что-то здесь не так? Я правильно делаю HTTP-запрос, и ответ JSON возвращается так же, как ожидалось, если i console.log, но когда я пытаюсь манипулировать this.errorMessage, он говорит, что он не определен, хотя я уже с успехом использовал его в другом месте ...

Вот весь код для этого компонента

export default { 
    methods: { 
     submitForm: function(e) { 
      e.preventDefault(); 

      Axios.post('/api/login', { 
       email: this.email, 
       password: this.password 
      }).then((response) => { 
       debugger; 
       this.errorMessage = response.data.message; 
      }).catch((error) => { 
       console.error(error); 
      }); 
     } 
    }, 
    data: function() { 
     return { 
      errorMessage: null, 
      email: null, 
      password: null 
     } 
    }, 
    components: { 
     'error': Error 
    } 
} 

РЕШЕНИЯ:

оригинального запрос является правильной, жиром функция стрелки должна сохранить значение this, вопрос был с отладчиком Chrome, который показал значение мне как undefined даже th они не были ... Извините за глупый вопрос, я надеюсь, что это поможет другим людям столкнуться с такой проблемой.

Answer 1

Axios.post ближе функция поэтому свойство определить в нем выглядит как частные под более функции.

Вы должны определить переменную вне ближе, как это:

//this will pick your data. 
let self = this; 


Axios.post('/api/login', { 
    email: this.email, 
    password: this.password 
    }).then((response) => { 
    self.errorMessage = response.message; 
      }).catch((error) => { 
       console.error(error); 
      }) 

Кроме того, если response.message не определен, то используйте response.body.message или возвращающегося переменную из Laravel.

Answer 2

данных ОТКЛИКА доступен под data собственности:

this.errorMessage = response.data.message;