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
			: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>