<script lang="ts" setup> import { LabeledValue } from "ant-design-vue/es/select"; import { SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory"; const { params } = useRoute(); const cidx = parseInt(params.cidx as string); const story = inject<SingleChapterResult | null>("story")!; const opts = ref<LabeledValue[]>( story!.chapterNames.map( (s, i) => ({ label: s, value: i + 1, }) as LabeledValue, ), ); const onChange = (v) => { console.log("SELECT", v); navigateTo(`/story/${story._id}/${v as LabeledValue}`); }; </script> <template> <div style="display: flow-root"> <a-select :value="opts[cidx - 1]" @select="onChange" :options="opts" /> </div> </template> <style scoped> .ant-select { width: 100%; } </style>