laravelのvue.js2でjsonの応答を受け取る

Question

リクエストを送信し、それに基づいて応答を取得しています。ステータスを確認して何か違うものを表示したい場合は、問題が何であるか把握できません。そして私は、この使用してVueのコンポーネントにアクセスしようとしていると私はそのエラー状態が定義されていないそうだ

次のようになります応答を受信して​​います、ここに私のVueのコンポーネントがある

<script> 
    export default { 
     mounted() { 
       axios.get('/userfound/' + this.profile_user_id) 
       .then(function (response) { 
        console.log(response); 
        this.status = response.data.status;     
       }) 
       .catch(function (error) { 
        console.log(error); 
        }); 
       }, 
     props: ['profile_user_id'], 
     data(){ 
      return { 
       status: '' 
      }   
     }, 
     methods:{ 
      add_friend(){ 
       // this.loading = false 
       axios.get('/add_friend/' + this.profile_user_id) 
       .then(function (response) { 
        console.log(response); 
        if (response.data == 1) { 
         this.status = 'waiting' 
        } 

       }) 
       .catch(function (error) { 
        console.log(error); 
        }); 
       } 
      } 
     } 
</script> 

なぜこのエラーが発生します：TypeError: cannot read property 'status' of undefined .. 私は"this.status = response.body.status"とを試しましたでもどちらも動作していません

Answer 1

私は変数のスコープに問題があると考えています。答えは下にしてみてください。

<script> 
export default { 
    mounted() { 
      var self = this; 
      axios.get('/userfound/' + self.profile_user_id) 
      .then(function (response) { 
       console.log(response); 
       self.status = response.data.status;     
      }) 
      .catch(function (error) { 
       console.log(error); 
       }); 
      }, 
    props: ['profile_user_id'], 
    data(){ 
     return { 
      status: '' 
     }   
    }, 
    methods:{ 
     add_friend(){ 
      // you can do same here as well 
      var self = this; 
      axios.get('/add_friend/' + self.profile_user_id) 
      .then(function (response) { 
       console.log(response); 
       if (response.data == 1) { 
        self.status = 'waiting' 
       } 
      }) 
      .catch(function (error) { 
       console.log(error); 
       }); 
      } 
     } 
    } 
</script>