我正在用vuejs写一个应用程序，我想在组件安装时加载数据，但安装程序在onMounted加载数据之前返回数据
我的代码我通过props从另一个组件获得了id。然后通过一个包含axios方法的函数传递它。
返回数据数组。
export default defineComponent({
props: {
courseId: {
type: String
}
},
data(){
return {
courseDetails: []
}
},
setup(props) {
let courseDetail = reactive([])
let sections = reactive([])
console.log("No details", courseDetail)
onMounted(() => {
// showLoader(true);
Course.getSectionAndSubsections("get-section-and-subsections", props.courseId).then(response => {
courseDetail = response.data.courses;
sections = response.data.sections;
console.log("leave my house", courseDetail)
NotificationService.success(response.data.message);
// showLoader(false);
}).catch(err => {
NotificationService.error(err.response);
// showLoader(false);
});
});
console.log("Course detail ", courseDetail);
return{
courseDetail
}
}
})我该如何解决这个问题？
2条答案
按热度按时间wf82jlnq1#
我想在安装组件时加载数据，但安装程序在onMounted加载数据之前返回数据
这是正确的-在onMounted钩子之前，它应该返回默认值。问题是你的数据不是React性的。你使用reactive是这样的：
这是不正确的，因为您没有更改courseDetail内容。指定新对象。
在这种情况下，裁判可能会更好一点：
然后你可以得到值：
并分配一个新的：
你所做的是：
它可以工作，但它应该看起来像这样：
检查我的演示有两个选项：基于ref和基于reactive：
https://codesandbox.io/s/ref-vs-reactive-jfdvc?file=/src/App.vue
thtygnil2#
脚本设置就像vue2中创建的钩子一样，因此它会在onMounted钩子之前被调用。为了解决你的问题，你可以用ref来处理它。