<script lang="ts" setup> import { Field, useFieldArray } from "vee-validate"; import { IBand } from "@models/band"; const { sb: selectedBands } = inject<any>("selectedBands"); const allBands = inject<Ref<IBand[]>>("bandlist"); const fname = inject<string>("curName"); const opts = computed(() => { const uf: any[] = []; selectedBands.value.forEach((v: number) => { uf.push(allBands?.value.find((a) => a._id == v)?.characters); }); return uf.flat(Infinity).map((a) => ({ value: a, label: a })); }); const { fields, push, remove, replace, update } = useFieldArray<string[]>(fname + "relationships"); // replace([]); </script> <template> <a-form-item label="Pairings"> <a-row :gutter="5" :wrap="true" v-for="(field, idx) in fields" :key="field.key"> <Field :name="fname + 'relationships' + `[${idx}]`"> <a-select mode="multiple" :options="opts" v-model:value="field.value as string[]" @change="(val) => update(idx, val as string[])"> <template #removeIcon> <i class="far fa-circle-x" /> </template> </a-select> </Field> <a-col :span="4"> <a-button @click="(e) => remove(idx)"> - </a-button> </a-col> </a-row> <a-row justify="end"> <a-col :span="2"> <a-button @click="(e) => push([])"> + </a-button> </a-col> </a-row> </a-form-item> </template>