<template>
  <q-select v-model="selectedValue" :label="displayName" :options="options"/>
</template>

<script lang="ts">
import { defineComponent,ref,watchEffect } from 'vue';

export default defineComponent({
  name: 'SelectBox',
  props: {
    displayName:{
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    options: {
      type: Array,
      required: true,
    },
    modelValue: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const selectedValue = ref(props.modelValue);

    watchEffect(() => {
      emit('update:modelValue', selectedValue.value);
    });

    return {
      selectedValue
    };
  },
});
</script>
