app_vue2/components/Ui/Input/Enum.vue

<template>
  <main>
    <v-skeleton-loader
      v-if="loading"
      type="list-item"
      loading
    ></v-skeleton-loader>

    <v-select
      v-if="!loading"
      :label="$t(label_field)"
      :value="data"
      :items="items"
      item-text="label"
      item-value="value"
      @change="$emit('update', $event, field)"
      :rules="rules"
      :disabled="readOnly"
    ></v-select>
  </main>
</template>

<script lang="ts">
  import {defineComponent, ref, useContext, useFetch} from '@nuxtjs/composition-api'
  import {AnyJson} from "~/types/interfaces";
  import {QUERY_TYPE} from "~/types/enums";

  export default defineComponent({
    props: {
      enumType: {
        type: String,
        required: true
      },
      label:{
        type: String,
        required: false
      },
      field:{
        type: String,
        required: false
      },
      data: {
        type: String,
        required: false
      },
      readOnly: {
        type: Boolean,
        required: false
      },
      rules: {
        type: Array,
        required: false
      }
    },
    setup(props){
      const label_field = props.label ?? props.field

      const loading = ref(true)
      const { enumType } = props
      const {$dataProvider} = useContext()

      const items: AnyJson = ref([])
      const {fetch, fetchState} = useFetch(async () => {
        items.value = await $dataProvider.invoke({
          type: QUERY_TYPE.ENUM,
          enumType: enumType
        })
        loading.value = false
      })

      return {
        items,
        label_field,
        loading
      }
    }
  })
</script>

<style scoped>
</style>