<script setup lang="ts"> import { RuleExpression, useField } from "vee-validate"; import { cs } from "~/lib/client/storyFormSchema"; import { IBand } from "~/models/band"; const fname = inject<string>("curName"); const { sb: selectedBands } = inject<any>("selectedBands"); const allBands = inject<Ref<IBand[]>>("bandlist"); const opts = computed(() => { const unflattened: any[] = []; selectedBands?.value?.forEach((v: number) => { unflattened.push(allBands?.value.find((a) => a._id == v)?.characters); }); return unflattened.flat(Infinity).map((a) => ({ value: a, label: a })); }); const charField = useField<string[]>( fname + "characters", cs.fields.characters as unknown as MaybeRef<RuleExpression<string[]>>, ); const { value, errorMessage, name: bandName, setValue } = charField; // setValue([]); </script> <template> <a-form-item :help="errorMessage" label="Characters" :name="bandName as string" :validate-status="!!errorMessage ? 'error' : undefined" > <a-select mode="multiple" :options="opts" v-model:value="value"> <template #removeIcon> <i class="far fa-circle-x" /> </template> </a-select> </a-form-item> </template>