Files
gremiumhub/legalconsenthub/app/components/formelements/TheSelect.vue

33 lines
943 B
Vue

<template>
<USelect v-model="modelValue" :placeholder="$t('applicationForms.formElements.selectPlaceholder')" :items="items" />
</template>
<script setup lang="ts">
import type { FormOptionDto } from '~~/.api-client'
const props = defineProps<{
label?: string
formOptions: FormOptionDto[]
}>()
const emit = defineEmits<{
(e: 'update:formOptions', value: FormOptionDto[]): void
}>()
// Our "label" is the "value" of the select
const items = computed(() => props.formOptions.map((option) => ({ label: option.label, value: option.label })))
const modelValue = computed({
get: () => props.formOptions.find((option) => option.value === 'true')?.label,
set: (val) => {
if (val) {
const updatedModelValue = [...props.formOptions]
updatedModelValue.forEach((option) => {
option.value = option.label === val ? 'true' : 'false'
})
emit('update:formOptions', updatedModelValue)
}
}
})
</script>