无法在 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(...)中没有使用箭头 function 。 这意味着您不会从 VueJS 组件中保留词法 this ，因为function() {...}将为自己创建一个新的 scope 。 如果您将其更改为使用箭头 function，则回调中的this将引用您的 VueJS 组件实例：

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