vue3使用foreach循环时,“item”的类型为“未知”
时间: 2023-10-09 18:05:21 浏览: 37
在 Vue 3 中使用 `forEach` 循环时,因为 TypeScript 不知道数组中每个元素的类型,所以默认将 `item` 的类型设置为 `unknown`。你可以通过使用泛型来解决这个问题。以下是一个例子:
```typescript
<template>
<div>
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
interface Item {
id: number;
name: string;
}
export default defineComponent({
name: 'MyComponent',
data() {
return {
items: [
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Orange' },
],
};
},
mounted() {
this.items.forEach((item: Item) => {
console.log(item.name);
});
},
});
</script>
```
在这个例子中,我们定义了一个 `Item` 接口,表示数组中每个元素的类型。在 mounted 钩子函数中,我们使用 `forEach` 循环遍历数组,并将 `item` 的类型设置为 `Item`,这样 TypeScript 就可以正确地推断 `item` 的类型了。