39 lines
1.3 KiB
Vue
39 lines
1.3 KiB
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>
|