next/components/story/atoms/characters.vue

<script setup lang="ts">
	import { RuleExpression, useField } from "vee-validate";
	import { cs } from "@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 v-bind="$attrs" mode="multiple" :options="opts" v-model:value="value">
			<template #removeIcon>
				<i class="far fa-circle-x" />
			</template>
		</a-select>
	</a-form-item>
</template>