<script setup lang="ts"> import { DefaultOptionType } from "ant-design-vue/es/select"; import { RuleExpression, useField } from "vee-validate"; import { cs } from "~/lib/client/storyFormSchema"; import { IBand } from "~/models/band"; import { log } from "~/lib/server/logger"; import iconEl from "../icon.vue"; const bandlist = inject<IBand[]>("bandlist"); const fname = inject<string>("curName"); const { updateBands, sb } = inject<any>("selectedBands"); const bl = ref(bandlist || []); const options: DefaultOptionType[] = bl.value .filter((a) => a.name != "") .map((a) => ({ value: a._id, label: a.name, disabled: a.locked || false, })); let bandField = useField( fname + "bands", cs.fields.bands as unknown as MaybeRef<RuleExpression<number[]>>, ); const { value, errorMessage, name, setValue } = bandField; // setValue(sb) </script> <template> <a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :help="errorMessage" label="Bands" > <a-select :allow-clear="true" mode="multiple" option-filter-prop="label" @change=" (val) => { // log.debug(val); updateBands(val); setValue(val as number[]); } " v-model:value="value" :options="options" > <template #removeIcon> <i class="far fa-circle-x" /> </template> </a-select> </a-form-item> </template>