Vuejs :ajax 不显示验证错误消息

Question

刚开始使用带有 Laravel 的 vuejs，我正在尝试使用 axios http 客户端库发出 post 请求。请求工作正常，但我无法在 html 文件中显示错误消息。

这是 html 文件

<form @submit.prevent="addJob" >

  <input type="text" v-model="user.name" >
  <textarea v-model="user.message"></textarea>
  <button >Submit</button>
  //for showing errors
  <span v-if="error">{{error}} </span>
  </form>

Js

export default {

        data:function(){
           return {
              test:'hello',
              more:[
                      { message: 'Foo' },
                      { message: 'Bar' }
                   ],
              origin:'',
              user:{},
              error:''
           }
        },
        methods:{
          addJob:function(e){
             axios.post('/test',this.user)
               .then(function (response) {
                 //set the error message
                 this.$set('error',response.data.errors);
                 //this will returns nothing
                 console.log(error);
               })
               .catch(function (error) {

               });
          }

        }
    }

然而 response.data.errors returns 错误消息却无法在 html 页面中显示。

Answer 1

这个范围不正确，而是使用不绑定自己范围的箭头函数：

  addJob:function(e){
     axios.post('/test',this.user)
       .then(response => {
         this.$set('error',response.data.errors);
       })
       .catch(function (error) {

       });
  }

Vuejs :ajax 不显示验证错误消息

Vuejs :ajax validation error messages not displaying

javascript

php

laravel-5

vuejs2

axios