Присвоить данные экземпляру Vue после axios.all ()

Question

Я звоню два запроса с axios.all() на mounted(), и я не могу присвоить данные ответа моим данным Vue. Я включил немного console.log(), чтобы понять, что происходит.

app = new Vue({
    data: {
        countries: [],
        cities: [],
    },
    methods: {
        getCountries() {
            return axios({
                method: 'get',
                url: '/utils/countries/',
            })
        },
        getCities() {
            return axios({
                method: 'get',
                url: '/utils/cities/',
            })
        }
    },
    mounted() {
        console.log('1 ' + this.cities)
        axios.all([this.getCountries(), this.getCities()])
        .then(axios.spread(function (countries, cities) {
            this.countries = countries.data;
            this.cities = cities.data;
            console.log('2 ' + this.cities)
        }))
        .catch(error => console.log(error));
        console.log('3 ' + this.cities)
    }
});

Выход:

1
3
2 [object Object]...

Мой звонок успешен, но this.cities и this.countries остаются пустыми. Как я могу передать им мои данные ответа?

Answer 1

Ключевое слово this внутри вашего обратного вызова Axios, вероятно, относится к лексическому контексту его собственной функции.Из-за этого вы присваиваете свойства cities и countries не того объекта.Вот почему эти свойства остаются пустыми в вашем компоненте Vue.

Используя функцию стрелки, this будет привязан к окружающему лексическому контексту, который в данном случае является вашим компонентом Vue.

Попробуйте это:

.then(axios.spread((countries, cities) => {
    this.countries = countries.data;
    this.cities = cities.data;
}))