<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> <template #menuItemSelectedIcon> <icon istyle="regular" name="fa-circle-check" /> </template> </a-select> </a-form-item> </template>