flaschengeist-frontend/src/plugins/pricelist/pages/InnerPricelist.vue

<template>
  <calculation-table v-if="!list" nodetails>
    <q-btn icon="mdi-view-list" round @click="list = !list">
      <q-tooltip> Zur Listenansicht wechseln </q-tooltip>
    </q-btn>
  </calculation-table>
  <pricelist v-if="list">
    <q-btn icon="mdi-cards-variant" round @click="list = !list">
      <q-tooltip> Zur Kartenansicht wechseln </q-tooltip>
    </q-btn>
  </pricelist>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, ref } from 'vue';
import CalculationTable from '../components/CalculationTable.vue';
import Pricelist from 'src/plugins/pricelist/components/Pricelist.vue';
import { usePricelistStore } from 'src/plugins/pricelist/store';
export default defineComponent({
  name: 'InnerPricelist',
  components: { Pricelist, CalculationTable },
  setup() {
    const store = usePricelistStore();

    onBeforeMount(() => {
      void store.getDrinks();
    });

    const list = ref(false);
    return { list };
  },
});
</script>