next/components/story/atoms/pairings.vue

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