Невозможно установить Vue. js значения данных внутри ответа ax ios - PullRequest
Новая
       3

Невозможно установить Vue. js значения данных внутри ответа ax ios

0 голосов
/ 06 апреля 2020

Я создал запрос топора ios к моему API для двух маршрутов. Используя данные ответов, я сортирую сообщения в правильные столбцы внутри массива. Это все работает как надо, но потом, когда я прихожу к присвоению значения этого массива массиву внутри data (), я получаю следующую ошибку: 

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

Так что я подумал, что что-то не так с массивом Я пытался назначить. Поэтому я попытался присвоить boardPosts простое строковое значение, и я все еще получаю ту же ошибку. Почему я не могу установить значение boardPosts в моем ответе axe ios?

мой код; 

    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));
            }
        }
    }

1 Ответ

1 голос
/ 06 апреля 2020

Это потому, что вы не используете функцию стрелки в axios.spread(...). Это означает, что вы не сохраняете лексическое значение this из компонента VueJS, так как function() {...} создаст для себя новую область видимости. Если вы измените его на использование функции стрелки, то this в обратном вызове будет ссылаться на ваш экземпляр компонента VueJS: 

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