TurnenAufZeit/client.ts/src/components/base/EditDialogSelect.vue

<template>
  <v-edit-dialog
    :return-value.sync="wert"
    large
    persistent
    :save-text="savebutton"
    cancel-text="Abbrechen"
    @open="open"
    @save="save"
    @close="close"
  >
    <div>{{ text }}</div>
    <template #input>
      <v-select
        v-model="wert"
        :label="label"
        :items="myitems"
        autofocus
        clearable
      />
    </template>
  </v-edit-dialog>
</template>

<script>
export default {
  name: 'EditDialogSelect',

  props: {
    value: {
      type: String,
      required: false,
      default: undefined
    },
    label: {
      type: String,
      required: false,
      default: ''
    },
    savebutton: {
      type: String,
      required: false,
      default: 'Übernehmen'
    },
    items: {
      type: undefined,
      required: true
    }
  },

  data: () => ({
    wert: null
  }),

  computed: {
    text () {
      return this.myitems?.find(e => e.value === this.value)?.text
    },
    myitems () {
      if (Array.isArray(this.items)) return this.items
      return []
    }
  },

  methods: {
    open () {
      this.wert = this.value
    },
    close () {
      this.wert = null
    },
    save () {
      this.$emit('input', this.wert)
      this.wert = null
    }
  }
}
</script>

<style scoped>

</style>