receiving a json response with vue.js2 in laravel - json

Question

sending a request and getting response which bases on it i want to chege the status and display something different, can't figure out what's the problem, the route seems to be working fine and I'm receiving a response which looks like this
I'm trying to access this using Vue component and I'm getting that error status is not defined, here is my Vue component
<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>
why am i getting this error: TypeError: cannot read property 'status' of undefined ..
i've tried "this.status = response.body.status" and "this.status = response.data.status" but neither is working

Answer 1

I believe there is an issue with the scope of a variable. Try below answer:
<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>