next/components/story/atoms/genre.vue

<script lang="ts" setup>
	import { useField } from "vee-validate";
	const fname = inject<string>("curName");
	let { data: data } = await useApiFetch("/genres");
	let opts = (data.value as unknown as any[]).map((a) => ({
		value: a,
		label: a,
	}));
	const { value, errorMessage, name, setValue } = useField<string[]>(fname + "genre");
</script>
<template>
	<a-form-item :help="errorMessage" label="Genre(s)" :validate-status="!!errorMessage ? 'error' : undefined">
		<a-select v-bind="$attrs" :allow-clear="true" :options="opts" v-model:value="value" mode="multiple">
			<template #removeIcon>
				<i class="far fa-circle-x" />
			</template>
		</a-select>
	</a-form-item>
</template>