flaschengeist-frontend/src/plugins/pricelist/components/DrinkModify.vue

<template>
  <q-card>
    <q-card-section>
      <div class="text-h6">Getränk Bearbeiten</div>
    </q-card-section>
    <q-card-section>
      <div class="fit row">
        <q-input
          v-model="edit_drink.article_id"
          class="col-xs-12 col-sm-6 q-pa-sm"
          filled
          label="Artikelnummer"
          dense
        />
        <q-input
          v-model="edit_drink.volume"
          class="col-xs-12 col-sm-6 q-pa-sm"
          filled
          label="Inhalt"
          dense
          suffix="L"
        />
        <q-input
          v-model="edit_drink.package_size"
          class="col-xs-12 col-sm-6 q-pa-sm"
          filled
          label="Gebindegröße"
          dense
        />
        <q-input
          v-model="edit_drink.cost_per_package"
          class="col-xs-12 col-sm-6 q-pa-sm"
          filled
          label="Preis Gebinde"
          suffix="€"
          dense
        />
        <q-input
          v-model="edit_drink.cost_per_volume"
          class="col-xs-12 col-sm-6 q-pa-sm q-pb-lg"
          filled
          label="Preis pro L"
          hint="Inkl. 19% Mehrwertsteuer"
          suffix="€"
          dense
        />
      </div>
    </q-card-section>
    <q-card-section>
      <drink-price-volumes
        v-model="edit_drink.volumes"
        editable
        @update:modelValue="updateVolume"
      />
    </q-card-section>
    <q-card-actions class="justify-around">
      <q-btn label="Abbrechen" @click="cancel" />
      <q-btn label="Speichern" color="primary" @click="save" />
    </q-card-actions>
  </q-card>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, onBeforeMount } from 'vue';
import { Drink } from '../store';
import DrinkPriceVolumes from './CalculationTable/DrinkPriceVolumes.vue';
import { clone } from '../utils/utils';
export default defineComponent({
  name: 'DrinkModify',
  components: { DrinkPriceVolumes },
  props: {
    drink: {
      type: Object as PropType<Drink>,
      required: true,
    },
  },
  emits: { save: () => true, cancel: () => true },
  setup(props, { emit }) {
    onBeforeMount(() => {
      //edit_drink.value = <Drink>JSON.parse(JSON.stringify(props.drink));
      edit_drink.value = clone(props.drink);
    });

    const edit_drink = ref<Drink>();
    function save() {
      emit('save');
    }
    function cancel() {
      emit('cancel');
    }
    function updateVolume(test: Drink) {
      console.log(test);
    }
    return { edit_drink, save, cancel, updateVolume };
  },
});
</script>