如何使用函数在data（）的变量内设置值？

Question

我正在Laravel应用程序内创建一个Vue.js组件。

在我收到axios请求的响应之后，我无法在方法data（）的变量中放入值

代码如下：

app.js

require('./bootstrap')

window.Vue = require('vue')

Vue.component('card', require('./components/card.vue'))


let app = new Vue({
    el: '#app'
})

card.vue

<script>
module.exports  = {
    props: [
        'name'
    ],
    data: function() {
        return {
            projects: [],
        }
    },
    mounted() {
        this.getProjects() // NOT WORK?
    },
    methods: {
        getProjects: function() {
            axios.get('/api/v1/getProjects').then(function (response) {

                console.log(response.data)
                this.projects = response.data // NOT WORK

            }).catch(function (error) {

                console.log(error)

            }).then(function () {

            })
        },
    }
}
</script>

Answer 1

尝试添加.bind(this)或将function替换为=>：

getProjects: function() {
        axios.get('/api/v1/getProjects').then((response) => {

            console.log(response.data)
            this.projects = response.data // NOT WORK

        }).catch((error) => {

            console.log(error)

        }).then(function () {

        })
    },

Answer 2

这是因为在响应回调中使用了this。您应该使用箭头功能（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions）或将上下文保存在单独的变量中。