next/components/story/atoms/genre.vue

29 lines
695 B
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(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 as string[]"
mode="multiple"
>
<template #removeIcon>
<i class="far fa-circle-x" />
</template>
</a-select>
</a-form-item>
</template>