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