VueJS обрабатывает несколько обещаний при загрузке страницы

Question

Я перебрал множество проблем и до сих пор не нашел, как их решить, так что вы - мой последний шанс ...

У меня есть компонент Vue, который должен загружать данные из APIна создание и затем отобразить эти данные в компоненте.Я уже делал это раньше без каких-либо проблем, но для этого я делаю, это не работает ...

<template>
    <thead v-if="loaded">
    <tr>
        <th v-for="label in labels">
            {{label}}
        </th>
    </tr>
    </thead>
</template>

<script>
    import Schema from '../../api/schema'

    export default {
        data() {
            return {
                labels: [],
                loaded: false
            }
        },
        props: {
            fields: Array
        },
        methods: {
            getFieldsLabels: function () {
                return Promise.all(
                    this.fields
                        .map((field) => Schema().getField(field)
                            .then(response => response.getLabel())
                        )
                )
            }
        },
        mounted() {
            this.getFieldsLabels().then(
                response => {
                    this.loaded = true;
                    this.labels = response
                }
            )
        }
    }
</script>

У меня есть несколько обещаний, которые я передаю в Promise.all, но когда я нажимаю F5в моем браузере страница остается пустой.Но когда он перезагружается с помощью HMR, он работает ...

Есть идеи?

Answer 1

я думаю, потому что вы пытаетесь использовать then ответа другого then

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

        getFieldsLabels: function () {
            return Promise.all(
                this.fields
                    .map((field) => Schema().getField(field))
            )
        }

Вам необходимо добавить getLabel к mountedфункция

        this.getFieldsLabels().then(
            response => {
                this.loaded = true;
                this.labels = response.getLabel()
            }
        )