Vuejs：ajax検証エラーメッセージが表示されない

Question

Laravelでvuejsを開始したばかりなので、axios httpクライアントライブラリで投稿をリクエストしようとしています。 要求はうまく動作しますが、エラーメッセージを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はエラーメッセージを返しますが、私は、HTMLページに表示することができませんが。この

Answer 1

範囲が正しくないと、代わりに自分の範囲を結合しない矢印関数を使用：

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

     }); 
    }