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

<template>
  <calculation-table v-if="!list" public>
    <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" public>
    <q-btn icon="mdi-cards-variant" round @click="list = !list">
      <q-tooltip> Zur Kartenansicht wechseln </q-tooltip>
    </q-btn>
  </pricelist>
</template>

<script>
import { defineComponent } from 'vue';
import CalculationTable from '../components/CalculationTable.vue';
import Pricelist from '../components/Pricelist.vue';
import { usePricelistStore } from '../store';
import { onBeforeMount, ref } from 'vue';
export default defineComponent({
  name: 'OuterPricelist',
  components: { Pricelist, CalculationTable },
  setup() {
    const store = usePricelistStore();

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

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

<style scoped></style>