javascript - 无法在 axios 响应中设置 Vue.js 数据值

Question

我已经为两条路线向我的 api 创建了 axios 请求。使用响应数据，我将帖子排序到数组内的正确列中。这一切都按预期工作，但是当我将此数组的值分配给 data() 内的数组时，我收到以下错误；

TypeError: Cannot set property 'boardPosts' of null
    at eval (SummaryBoard.vue?2681:90)
    at wrap (spread.js?0df6:25)

所以我想我尝试分配的数组可能有问题。因此，我尝试为 boardPosts 分配一个简单的字符串值，但仍然遇到相同的错误。为什么我无法在 axios 响应中设置 boardPosts 的值？

我的代码；

    import axios from 'axios';

    export default {
        name: 'SummaryBoard',
        data() {
            return {
                boardPosts: '',
            }     
        },
        created() {
            this.getBoardData();
        },
        methods:
            getBoardData() {
                function getBoardColumns() {
                    return axios.get('http://localhost:5000/api/summary-board/columns');
                }

                function getBoardPosts() {
                    return axios.get('http://localhost:5000/api/summary-board/posts');
                }

                axios.all([getBoardColumns(), getBoardPosts()])
                    .then(axios.spread(function(columnData, postData) {
                        let posts = postData.data;
                        // add posts array to each object
                        let columns = columnData.data.map(obj => ({...obj, posts: []}));

                        posts.forEach((post) => {
                            // If column index matches post column index value
                            if(columns[post.column_index]){
                                columns[post.column_index].posts.push(post);
                            }
                        });

                        console.log(columns);
                        this.boardPosts = 'hello';
                    }))
                    .catch(error => console.log(error));
            }
        }
    }

Answer 1

那是因为您在 axios.spread(...) 中没有使用箭头函数。这意味着您不会保留 VueJS 组件中的词法 this，因为 function() {...} 将为自身创建一个新作用域。如果您将其更改为使用箭头函数，则回调中的 this 将引用您的 VueJS 组件实例:

axios.all([getBoardColumns(), getBoardPosts()])
    .then(axios.spread((columnData, postData) => {
        // Rest of the logic here
    }))
    .catch(error => console.log(error));