34 lines
780 B
Vue
34 lines
780 B
Vue
|
<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>
|