【发布时间】：2019-12-10 09:12:33
【问题描述】：
我有一个 Vue 模板，我在其中进行 async/await 调用以获取所有会话数据，这些数据不必渲染，而是以数组的形式发送到另一个组件，另一个组件会得到那个信息并生成一些图表。作为测试，我将数组 sessionSelected 添加到 html 模板中，以查看它是否正确加载并且工作正常（此数据更改由选择 program 时的选择组件触发）。
我感到困惑的行为可以在下面的 listSessions() 方法中看到，其中我的 console.log(val) 位于 sessionSelected 数组迭代的映射内；
当我检查控制台时，当我第一次从选择组件（程序）中选择一个选项时，返回的对象是空白的，但是当我选择另一个选项时，比如说program 6 它会加载上一个console.log(val) 中的会话，即使相同的数据对象在模板中迭代时正确显示所有会话。 （这有点像它总是在后面，一个“滴答”）
可能提示，如果它有帮助，我将@click到一个<p>元素下方的组件下方，所以在选择程序时，请说出program 2，然后我点击到第987654328 @ the <p> tag ，console.log 确实从“listSessions”方法中正确显示。
我需要能够同步 sessionSelected 数组对象，这样我可以确定当我选择一个程序时，在 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) 显示模板中显示的相同数据，而不必使用带有@click 事件的<p> 标记作为hack，基本上，当一个程序从选择组件中被选中时，加载相关的数据。
【问题讨论】：
标签： vue.js render console.log