vue.js

Question

我有一个 Vue 模板，我在其中进行 async/await 调用以获取所有会话数据，这些数据不必呈现，而是以数组的形式发送到另一个组件，另一个组件将获取该信息并生成一些图表。作为测试，我将数组 sessionSelected 添加到 html 模板以查看它是否正确加载并且工作正常（此数据更改由 select 组件触发，当 selecting program).

然而，我感到困惑的行为可以在下面的 listSessions() 方法中看到，其中我有 console.log(val) 位于 sessionSelected 数组迭代的映射中;

当我检查控制台时，当我第一次从 select 组件（一个程序）中选择一个选项时，返回的对象是空白的，但是当我选择另一个选项时，假设 program 6 它在 console.log(val) 中加载以前的会话，即使相同的数据对象在模板中迭代时正确显示所有会话。（有点像它总是走，一个 "tick" 落后）

A possible hint, if it helps, I added an @click to a <p> element below the select's components, so when the program is chosen, say program 2，然后我点击那个 <p> 标签，console.log 确实从 "listSessions" 方法正确显示。

我需要能够以这种方式同步 sessionSelected 数组对象，以便我确定当我 select 一个程序时，在 html 模板中，方法将检索正确的（会话的）数组，就像在模板中呈现的节目一样。

<template>
<v-container>
    <v-layout>
        <v-flex lg4 sm12 xs12>
                <GPSelect @input="listTreatments" v-model="patientSelected" :items="tvPatients" label="Patients" />
        </v-flex>
        <v-flex lg4 sm12 xs12>
                <GPSelect @input="listPrograms" v-model="treatmentSelected" :items="treatments" label="Treatments" :disabled="treatments === undefined || treatments.length === 0" />
        </v-flex>
        <v-flex lg4 sm12 xs12>
                <GPSelect @input="listSessions" v-model="programSelected" :items="programs" label="Programs" :disabled="programs === undefined || programs.length === 0" />

            <p @click="listSessions">Session selected {{sessionSelected}}</p>
            <p>ProgramSelected {{programSelected}}</p>

        </v-flex>
    </v-layout>

    <BarChart :label="label" :data="dataSet" :labels="labels" />

</v-container>
</template>

<script>

export default {

    data() {
        return {
            tvPatients: [],
            patientSelected: "",
            treatments: [],
            programs: [],
            sessions: [],
            treatmentSelected: "",
            programSelected: "",
            sessionSelected: [],
            dataSet: [],
            ...       
        }
    },

    created() {
        this.listPatients();
    },

    methods: {

        async listSessions() {

            await this.getSessions();
            this.updateData();

            this.sessionSelected.map(async (val) => {
                console.log( val)
            })

            this.sessionSelected.length = 0;
            this.sessions.length = 0;

        },

        async getSessions() {

            if (this.patientSelected) {

                const response = await SessionService.getSessions(null, "meta");
                if (response.data) {
                    return response.data.map(async (val, index) => {
                        if (val.program_id === this.programSelected) {
                            if (this.sessions != undefined) {

                                this.sessions.push(await SessionService.getSession(val._id, "meta"));
                                this.sessionSelected.push(await SessionService.getSession(val._id, "meta"));

                            }

                        }
                    })
                }

            }
        },
        async listPrograms() {

            this.programs = await this.getPrograms();
        },
        async getPrograms() {

            let response = await PatientService.getPatient(this.patientSelected, "tv");
            if (this.patientSelected) {

                const params = {
                    "treatment-id": response.data.documents[0].document.active_treatment_id
                };

                const programResponse = await ProgramService.getPrograms(params);

                return await programResponse.data.map((val, index) => {
                    return {
                        name: `Program ${(index + 1) } ${response.data.documents[0].document.first_name}`,
                        value: val._id
                    }
                });
            }

        }
    }

}
</script>

我希望 this.sessionSelected 地图中的 console.log(val) 显示模板中显示的相同数据，而不必使用带有 @ 的 <p> 标签基本上，当程序从 select 组件获得 selected 时，将点击事件加载相关数据。

Answer 1

这么多 async/await 的事情很难跟上。进行一些重构来处理厄运金字塔不会有什么坏处。

这句话引起了我的注意：

return response.data.map(async (val, index) => {

这将是 return 一系列未解决的承诺。周围的函数 getSessions 是 async 因此它将 return 值包装在进一步的承诺中。

行 await this.getSessions(); 将等待该承诺解决。不幸的是，它会立即解析 promise 数组，而不是等待单个 promises 解析。这就是为什么日志记录似乎落后了一步，因为内部承诺尚未完成。

我认为您需要添加 Promise.all，这样外部 promise 就会等待 promise 数组。

return Promise.all(response.data.map(async (val, index) => {

vue.js - 数据未显示在 console.log 中，但在模板中呈现良好

vue.js - Data doesn't show in console.log but renders fine in template

render

console.log