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

<template>
  <div>
    <q-table title="Getränke" :columns="columns" :rows="drinks" row-key="name">
      <template #body-cell-prices="{ row: { prices } }">
        <q-td>
          <div v-for="price in prices" :key="price.id" class="row">
            <div class="col">
              {{ setVolume(price.volume) }}
            </div>
            <div class="col">
              {{ setCurrency(price.price) }}
            </div>
            <div class="col">
              {{ price.description }}
            </div>
          </div>
        </q-td>
      </template>
    </q-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, computed } from 'vue';
import { usePricelistStore } from '../store';

export default defineComponent({
  name: 'Pricelist',
  filters: {
    setVolume(volume: number) {
      if (volume * 10 > 1) {
        return `${volume}l`;
      }
      return `${volume * 100}cl`;
    },
    setCurrency(price: number) {
      return `${price.toFixed(2)}€`;
    }
  },
  setup() {
    const store = usePricelistStore();

    onBeforeMount(() => {
      void store.getDrinks();
    });
    const drinks = computed(() => store.drinks);
    const columns = [
      {
        name: 'name',
        label: 'Getränk',
        field: 'name'
      },
      {
        name: 'prices',
        label: 'Preise',
        field: 'prices'
      }
    ];
    return { columns, drinks };
  }
});
</script>