kaceeapp7/src/views/Tab2Page.vue

<template>
  <ion-page>
    <ion-header>
      <top-bar></top-bar>
    </ion-header>
    <ion-content class='ion-padding' :fullscreen="true">
      <ion-grid>

        <ion-row>
          <ion-col size="6" v-for="c in cats" @click="gotoCatPage(c.name)">
            <ion-img :src="c.image"></ion-img>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonPage, IonHeader, IonToolbar, IonTitle, IonButton, IonContent, IonBackButton, IonButtons, IonRow, IonCol, IonGrid, onIonViewWillEnter, IonLabel, IonImg } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
import TopBar from '@/components/TopBar.vue'
import { useRouter } from 'vue-router';

import { ref, onMounted } from 'vue'
import axios from 'axios';
import { API_URL } from '../api_config';

const router = useRouter()
let cats = ref([])

onIonViewWillEnter( async () => {

  console.log("get product cat")
  const res2 = await axios.get(API_URL+'fn_product_cats/?format=json&is_promote=True')
  //cats = res2.data.results
  console.log('cats ')
  console.log(res2.data.results)
  cats.value = res2.data.results
} )

const gotoCatPage = (cat) => {
  router.push(`/tabs/tab2/prod_list/${cat}`)
} 
</script>