在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"和"this.status = response.data.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>