I recently made the switch to using Vue3 with TypeScript after previously working with Vue2 and JavaScript. I am encountering an issue in my IDE where it is showing an error (even though the code itself functions correctly, but may not be entirely accurate).
Here is the code snippet:
export default {
name: 'Sidebar',
data() {
return {
menu: { name: 'Menu', icon: MenuIcon },
navigation: [
{ id: 0, name: 'Home', icon: HomeIcon, path: '/', count: 0, current: true },
{ id: 1, name: 'Users', icon: UsersIcon, path: '/about', count: 3, current: false },
]
}
},
methods: {
makeCurrent: function(item: navItem) {
this.navigation.forEach((nav: { current: boolean; id: any; }) => {
nav.current = nav.id === item.id;
})
}
}
}
The specific error highlighted by the IDE is on the usage of "navigation" in this.navigation.forEach(..., which results in the following error message:
TS2339: Property 'navigation' does not exist on type '{ makeCurrent: (item: navItem) => void; }'