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

<template>
  <div>
    <q-table title="Getränke" :columns="columns" :data="drinks" row-key="name">
      <template v-slot:body-cell-prices="{ row: { prices } }">
        <q-td>
          <div v-for="price in prices" :key="price.id" class="row">
            <div class="col">
              {{ price.volume | setVolume }}
            </div>
            <div class="col">
              {{ price.price | setCurrency }}
            </div>
            <div class="col">
              {{ price.description }}
            </div>
          </div>
        </q-td>
      </template>
    </q-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, ref } from '@vue/composition-api';
import { StateInterface } from 'src/store';
import { DrinkInterface } from '../store/drinks';
import { Store } from 'vuex';
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(_, { root }) {
    const store = <Store<StateInterface>>root.$store;
    const state = <DrinkInterface>store.state.drink;
    const drinks = ref(state.drinks);
    onBeforeMount(() => {
      void store.dispatch('drink/getDrinks');
    });
    const columns = [
      {
        name: 'name',
        label: 'Getränk',
        field: 'name',
      },
      {
        name: 'prices',
        label: 'Preise',
        field: 'prices',
      },
    ];
    return { columns, drinks };
  },
});
</script>