как установить ошибки от laravel в vuejs

Question

Я пытаюсь получить ошибки из Laravel в Vue, но в консоли я получаю это сообщение об ошибке "Невозможно установить свойство 'errors' of undefined". Я пробовал разные подходы, такие как прямое назначение ошибок и $ set () vue, чтобы установить сообщение об ошибке для объекта ошибки моей функции данных, но это все еще напрасно.

Это мой код

 export default{

  data(){
    return{
        form: {},
        errors:{}
    }
 },
 methods:{
      async onSave() {
        await Api().post('/stocks/store',this.form)
        .then()
        .catch(function (error) {
           if(error.response && error.response.status == 422) {
              let errors = error.response.data.errors;
              // this.$set(this.$data.errors,'errors',errors)
              console.log(errors);
              this.errors = errors;
           }
        });  
  }
}

Вот как сообщение об ошибке из моей консоли

Это сообщение об ошибке от laravel

ч теперь задайте this.errors с сообщением об ошибке от laravel

Answer 1

Если вы внимательно посмотрите на ошибку, она говорит:

Cannot set property 'errors' of undefined

Итак, проблема в том, что вы пытаетесь установить свойство неопределенного объекта, в данном случае: this, ваш Vue компонент.

Простой и удобный способ решения этой проблемы - использовать функцию стрелки вместо обычной функции в вашем Promise.catch() обратном вызове. Проще говоря, регулярное выражение функции имеет свой собственный this контекст, в котором функция стрелки отсутствует.

Вот пример кода, который должен помочь вам лучше понять:

        new Promise().then()
        .catch((error) => {
           if(error.response && error.response.status == 422) {
              this.errors = error.response.data.errors;
           }
        });  

Чтобы узнать больше о функции стрелки и связывание this