I am currently working on a Vue3 Single File Component for a customized list. Within this single file component, my objective is to export the main default Vue component along with an enum that declares the type of list it represents:
child:
<template>
<Listbox>
<template #header>
<h5>{{listType}}</h5>
</template>
</Listbox>
</template>
<script lang="ts">
export enum PagesListType {
RecentlyCreated = 'Recently Created',
RecentlyModified = 'Recently Modified',
Starred = 'Starred'
};
export default {
props: {
listType: PagesListType
},
data() {
return {
pages: [],
PagesListType
};
},
};
</script>
The enum specifically pertains to the functionality of this particular component and doesn't need to be placed in a different types folder. It directly influences how this list functions. However, encounters issues when attempting to do so within the parent component:
parent:
<template>
<div>
<PagesList :listType="PagesListType.RecentlyCreated"></PagesList>
<PagesList :listType="PagesListType.RecentlyModified"></PagesList>
<PagesList :listType="PagesListType.Starred"></PagesList>
</div>
</template>
<script lang="ts">
import PagesList, { PagesListType } from './PagesList.vue';
export default {
//details of the parent component
};
</script>
Upon importing the named PagesListType enum, it appears as undefined. What steps should I take to correctly export the named enum? Thank you!