Отображение VueJS данных геттера в шаблоне / асинхронном - PullRequest
Новая
       21

Отображение VueJS данных геттера в шаблоне / асинхронном

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

В VueJS компоненте с именем GlobeInformation. vue я хотел бы назвать метод получения "mapData", который, как я ожидаю, вернет измененную версию данных моего состояния, однако при ее отображении в моем шаблоне он отображается как пустой массив. Я разместил урезанную соответствующую версию моего кода ниже. Заранее спасибо.

PS: Полагаю, это происходит из-за вызова API asyn c, поэтому я попытался использовать условия v-if, чтобы проверить, были ли получены данные, и затем отобразить их в шаблоне.

GlobeInformation. vue

<template>
<div class="information">
    <div v-if="mapDataLoaded">
        {{ mapInformation }}
    </div>
</div>
</template>
<script>
export default {
    data: function() { 
        return { 
            mapDataLoaded: false,
            mapInformation: []    
        }
    },
    computed: {
        ...mapGetters(['mapData'])
    },
    methods: {
        ...mapActions(['fetchCondensedDetails'])
    },
    async mounted() {
        await this.fetchCondensedDetails('/')
        this.mapInformation = await this.mapData
        this.mapDataLoaded = true
    }
}
</script>

геттеры. js

export default {
    mapData: state => {
        let mapData = []
        state.condensed.forEach(country => {
            mapData[country.alpha_2] = country.confirmed
        })
        return mapData
    }
}

действия . js

export default {
    async fetchCondensedDetails({ commit }, path) {
        try {
            if (path === '/') {
                const res = await fetch('https://covidapi.info/api/v1/global/latest')
                commit('SET_CONDENSED_DETAILS', await res.json())
            }
        } catch (err) {
            console.log(err)
        }
    }

}

мутации. js

export default {
    SET_CONDENSED_DETAILS: (state, data) => {
        data.result.forEach((element, index) => {
            const key = Object.keys(element)[0]

            let details = countries.find(country => {
                if (country.alpha_3 === key) return country
            })

            if (details) {
                state.condensed.push({
                    ...data.result[index][key],
                    alpha_3: key,
                    alpha_2: details.alpha_2,
                    name: details.name
                })
            }
        })
    }
}

1 Ответ

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

Мы не можем видеть структуру данных countries, так что это немного предположительно, но должно работать, пока ваши данные действительно уникальны. Вы можете удалить mapInformation и использовать получатель непосредственно в шаблоне: 

<div v-if="mapDataLoaded">
  {{ mapData }}
</div>

Заменить получатель mapData на объект: 

mapData: state => {
  let mapData = {}; // <-- object instead of array
  ...
}
...