在vue3中如下代码<template v-for="item in menuInfo" :key="item.path"> <el-menu-item v-if="!item.children && !item.meta.hidden" :index="item.path" > <template #title> <!-- <el-icon><location /></el-icon> --> <span>{{ item.meta.title }}</span> </template> </el-menu-item> <el-menu-item v-if="item.children && item.children.length === 1 && !item.meta.hidden" :index="item.children[0].path" > <template #title> <!-- <el-icon><location /></el-icon> --> <span>{{ item.meta.title }}</span> </template> </el-menu-item> <el-sub-menu :index="item.path" v-if="item.children && item.children.length > 1 && !item.meta.hidden" > <template #title> <span>{{ item.meta.title }}</span> </template> <Menu :menuInfo="item.children" /> </el-sub-menu> </template>报错"item"的类型为未知
时间: 2024-02-13 09:05:08 浏览: 132
深入浅析Vue.js 中的 v-for 列表渲染指令
在 Vue 3 中,需要为循环的每个元素指定一个类型,否则会出现 "item" 的类型为未知的错误。你可以在组件中使用 props 选项来定义 menuInfo 的类型,例如:
```
<template v-for="(item: MenuInfo) in menuInfo" :key="item.path">
...
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
props: {
menuInfo: {
type: Array as () => MenuInfo[],
required: true
}
},
...
})
</script>
<!-- MenuInfo 的类型定义 -->
interface MenuInfo {
path: string;
children?: MenuInfo[];
meta: {
title: string;
hidden?: boolean;
};
}
```
在循环中使用 `(item: MenuInfo)` 来指定 item 的类型为 MenuInfo,定义组件的 props 选项时,使用 `type` 选项来指定参数类型。在这里,我们使用数组类型 `Array` 并通过 `() => MenuInfo[]` 的方式来指定数组元素的类型为 MenuInfo。
阅读全文