CFormSelect null selection issue

[btseee]

When i select Nicht gepruft its shows null as not displaying anything :

 selectOptions 
 [
  {
    "value": "null",
    "label": "Not tested"
  },
  {
    "value": "0",
    "label": "Nicht geprüft"
  },
  {
    "value": "1",
    "label": "Bestanden"
  },
  {
    "value": "2",
    "label": "Nicht bestanden"
  },
  {
    "value": "3",
    "label": "Nicht verfügbar"
  },
  {
    "value": "4",
    "label": "Im Wesentlichen bestanden"
  },
  {
    "value": "5",
    "label": "Nicht anwendbar"
  }
]

Component.vue :

<template>
  <div class="mb-3">
    <CInputGroup :class="validationObject?.$error ? 'input-error-border' : null">
      <CInputGroupText v-if="label">
        <CFormLabel :for="id" class="m-0"> {{ label }}<span v-if="validationObject?.required">*</span></CFormLabel>
      </CInputGroupText>
      <CFormSelect :id="id" :class="inputClasses" :modelValue="value" :options="selectOptions"
        :aria-invalid="validationObject?.$error" @update:model-value="onUpdate($event)" :disabled="disabled" />
    </CInputGroup>
    <div class="input-errors" v-for="error of validationObject?.$errors" :key="error.$uid">
      <div class="error-msg">{{ error.$message }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue';
import {v4 as uuidv4} from 'uuid';
import {ISelectItem} from '@/interfaces';

export default defineComponent({
  name: 'BBSFormSelect',
  setup() {
    return {
      id: uuidv4(),
    };
  },
  props: {
    modelValue: [String, Number],
    validationObject: Object,
    label: String,
    options: Array,
    rawOptions: Array,
    nullValueText: String,
    valueMember: String,
    displayMember: [String, Function],
    inputClasses: String,
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['update:modelValue'],
  computed: {
    selectOptions(): ISelectItem[] {
      let selectOptions: ISelectItem[] = [];
      if (this.nullValueText) {
        selectOptions.push({value: 'null', label: this.nullValueText});
      }

      if (this.rawOptions) {
        if (this.displayMember instanceof Function) {
          selectOptions = selectOptions.concat(
            this.rawOptions?.map((item: any) => ({
              value: item[this.valueMember as string],
              label: (this.displayMember as Function)(item),
            })) as ISelectItem[],
          );
        } else {
          selectOptions = selectOptions.concat(
            this.rawOptions?.map((item: any) => ({
              value: item[this.valueMember as string],
              label: item[this.displayMember as string],
            })) as ISelectItem[],
          );
        }
      } else {
        selectOptions = selectOptions.concat(this.options as ISelectItem[]);
      }
      console.info(selectOptions)
      return selectOptions;
    },
    value(): string | number | null {
      if (this.nullValueText && this.modelValue == null) {
        return null;
      }
      return this.modelValue as string | number;
    },
  },
  methods: {
    onUpdate(value) {
      if (this.nullValueText && value == 'null') {
        value = null;
      }

      this.validationObject?.$touch();
      this.$emit('update:modelValue', value);
    },
  },
});
</script>

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions