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

在 laravel 中收到 vue.js2 的 json 响应

receiving a json response with vue.js2 in laravel

json

vue-component

vuejs2

laravel-5.4