在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>