Vue.js 为什么带有道具的子组件的内容不会呈现在页面上？

在vuejs3应用程序中 我使用axios请求从后端API读取数据。我看到数据被传递到内部 组件，但我看不到子组件的内容在页面上呈现

父组件：

索引：：{index}
从“@/views/forum/ForumCategoryBlock.vue”导入ForumCategoryBlock
从“vuex”导入{useStore}
导出默认值{
名称：“forumsByCategoryPage”，
组成部分：{
ForumCategoryBlock，
},
设置（）{
const store=useStore（）
const orderBy=ref（'created_at'）
常量orderDirection=ref（'desc'）
常数forumsPerPage=ref（20）
const currentPage=ref（1）
设forumsTotalCount=ref（0）
设forumCategories=ref（[]）
让isPageLoaded=ref（false）
让credentialsConfig=settingCredentialsConfig
const currentLoggedUserToken=已计算(
() => {
return store.getters.token
}
)
const currentLoggedUser=已计算(
() => {
return store.getters.user
}
)
常量forumsByCategoryPageInit=async（）=>{
加载论坛（）
}
函数loadForums（）{
isPageLoaded=false
让凭据=getClone（credentialsConfig）
credentials.headers.Authorization='Bearer'+currentLoggedUserToken.value
let filters={current_page:currentPage.value，order_by:orderBy.value，order_direction:orderDirection.value}
const apiUrl=process.env.VUE\u APP\u API\u URL
get（apiUrl+“/按类别划分的论坛”、筛选器、凭据）
。然后（{data}）=>{
console.log（“/按类别划分的论坛数据：：”）
console.log（数据）
forumCategories.value=data.forumCategories
forumsTotalCount.value=data.forumsTotalCount
isPageLoaded=true
console.log（“++forumCategories:：”）
console.log（forumCategories）
})
.catch（错误=>{
控制台错误（错误）
isPageLoaded=true
})
}//loadForums（）{
未安装（forumsByCategoryPageInit）
返回{
currentPage、orderBy、orderDirection、iPageLoaded、LoadForumCategories、getHeaderIcon、pluralize、forumsTotalCount、forumCategories、currentLoggedUser
}
}//设置

和

ForumCategoryBlock.vue

：

在…内
块
nextActiveForumCategory:：{{nextActiveForumCategory}}

currentLoggedUser:：{{currentLoggedUser}}

索引：：{index}}

从“vue”导入{computed}
导出默认值{
名称：“forumCategoryBlock”，
道具：{
currentLoggedUser：{
类型：对象，
默认值：（）=>{}
},
NextActiveForum类别：{
类型：对象，
默认值：（）=>{}
},
索引：{
类型：数字，
默认值：（）=>{}
}
},
设置（道具）{
console.log（'setup props:：'）
控制台日志（道具）
const nextActiveForumCategory=已计算({
获取：（）=>props.value.nextActiveForumCategory
})
const currentLoggedUser=已计算({
获取：（）=>props.value.currentLoggedUser
})
常数指数=计算({
获取：（）=>props.index
})
返回{/*currentLoggedUser，nextActiveForumCategory，index*/}
}
}

我在浏览器中看到的内容：

出了什么问题？如何解决

已修改： 我明白错误在哪里：

  <div class="row m-0 p-0" v-show="forumCategories.length  && isPageLoaded" style="border: 2px dotted red;">

如果要删除第二个条件（&I），请在上面的一行中加载我看到的内容

但看起来var isPageLoaded不是反应性的，我不明白为什么？ If用ref声明，并在setup方法的返回中声明。 但看起来就像我在loadForums方法中修改它一样，它在模板中不起作用。。。

---

谢谢！

isPageLoaded

正在失去反应性，因为

loadForums（）

正在将其类型从

ref

更改为

Boolean

：

isPageLoaded=true//❌  不再是裁判

---

isPageLoaded

是一个，因此您的代码必须通过其

值

属性访问它。可能最好在此处使用

const

而不是

let

，以避免此错误：

const isPageLoaded=ref（false）
isPageLoaded.value=true//✅