vue component complains about import-CodePudding

I'm writing a vue component NavItem that represents am Item in a Navigation. I also have a NavItemModel class written in TS. But when I try to import it, vue complains that the module is not found:

Project structure

vue
./src
...../components
...../components/NavItem.vue
...../models
...../models/NavItemModel.ts

NavItem.vue

<template>
    <div>
        <a href="">{{content.title}}</a>
    </div>
</template>
<script>
import {NavItemModel}  from "../models/NavItemModel";
export default{
    name: 'NavItem',
    props:{
        content: NavItemModel
    },
    components:{
        
    }
}
</script>

NavItemModel.ts

export class NavItemModel{
    title:String;
    link: String;
    parentItem:NavItemModel;
    childItem:NavItemModel;
    constructor(title:String,link:String,parentItem:NavItemModel,childItem:NavItemModel){
        this.title = title;
        this.link = link;
        this.parentItem = parentItem;
        this.childItem = childItem;
    }
}

Where am I doing wrong?

CodePudding user response：

Set typescript language <script lang='ts'>

Declare your property like

 props: {
  content: Object as () => NavItemModel
 }

CodePudding user response：

You should not destructure the class. Destructing is used for properties and functions

<template>
    <div>
        <a href="">{{content.title}}</a>
    </div>
</template>
<script>
import NavItemModel  from "../models/NavItemModel";
export default{
    name: 'NavItem',
    props:{
        content: NavItemModel
    },
    components:{
        
    }
}
</script>