Hide Tabs based on a condition Ionic & Vue

Hi there!
I want to build an app that when all the checklists are checked, the next option of tab appears or just be able to click it, if not the user can´t change to the next tab, but I don´t know how to do that…
Can someone please help me ?
I would really appreciate it

Here´s my code
Tab 1

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title class="ion-text-center">Empaque</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
    
      <div class="container" id="app">
    

  <ion-list>
    <ion-item v-for='entry in form' v-bind:key="entry.form" class="checkbox">
      <label stacked class="labelFont">{{ entry.val }}</label>
      <ion-checkbox 
        slot="start"   
        @update:modelValue="entry.isChecked = $event"
        :modelValue="entry.isChecked">
      </ion-checkbox>

    </ion-item>
    </ion-list>

    <div class="Boton">
    <button ion-button full id="Uncheck" @click="Uncheck()" >Uncheck Todo</button>
    </div>

</div>      

    </ion-content>
  </ion-page>
</template>

<script>
import '@/css/tabs.css'

import { IonPage, 
         IonHeader, 
         IonToolbar, 
         IonTitle, 
         IonContent,
         IonItem,
         IonCheckbox,
         IonList } from '@ionic/vue';

export default  {
  components: { IonHeader, 
                IonToolbar, 
                IonTitle, 
                IonContent, 
                IonPage,
                IonItem,
                IonCheckbox,
                IonList },
    setup() {
    const form = [
      { val: 'Drone', isChecked: false },
      { val: 'Radio Control Cargado al 100%', isChecked: false },
      { val: 'Hélices - 2 Juegos', isChecked: false },
      { val: 'Baterias Cargadas al 100%', isChecked: false },
      { val: 'Inspección de Todos los Elementos', isChecked: false },
      { val: 'Dispositivo cargado al 100%', isChecked: false },
      { val: 'Power Bank', isChecked: false },
      { val: 'Tarjeta MicroSD', isChecked: false },
      { val: 'Landing Pad', isChecked: false },
      { val: 'Instalar/Actualizar apps de Vuelo', isChecked: false },
      { val: 'Descargar Mapas', isChecked: false },
      { val: 'Actualizar Firmware', isChecked: false },
      { val: 'Cables de Conexión y Carga', isChecked: false },
      { val: 'Cargados de Baterías', isChecked: false },
      { val: 'Cargador del Drone', isChecked: false },
      { val: 'Cargador del Radio Control', isChecked: false },
      { val: 'Kit de Limpieza del Drone', isChecked: false },
      { val: 'Facturas y Documentación de la Aeronave', isChecked: false },
      { val: 'Manuales de la Aeronave', isChecked: false },
      { val: 'Maleta/Caja de transporte de equipos', isChecked: false },
      { val: 'Conos reflectivos', isChecked: false },
      { val: 'Cinta de Seguridad', isChecked: false },
      { val: 'Radios de Comunicación', isChecked: false },
      { val: 'Extensión Eléctrica', isChecked: false },
      { val: 'Multitoma', isChecked: false },
      { val: 'Ropa de Trabajo', isChecked: false },
      { val: 'Botas Tácticas/Punta de Acero/Anti Salpicaduras', isChecked: false },
      { val: 'Chaleco Reflectivo', isChecked: false },
      { val: 'Casco de Protección Táctico/Industrial', isChecked: false },
      { val: 'Gorra/Pava', isChecked: false },
      { val: 'Carnet Identificación', isChecked: false },

      
    ];
    
    return { form };
  },
 methods: {
        Uncheck() {

         window.location.reload();
    }
    
    
    }
  
}
</script>

Tabs Page

<template>
  <ion-page>
    <ion-tabs>
      <ion-router-outlet></ion-router-outlet>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <div class="Icono">
          <img src="../../public/assets/resources/icono1.png"/>
          </div>
          <ion-label>Empaque</ion-label>
        </ion-tab-button>
          
        <ion-tab-button tab="tab2" href="/tabs/tab2">
          <div class="Icono">
          <img src="../../public/assets/resources/icono2.png"/>
          </div>
          <ion-label>Pre-Flight</ion-label>
        </ion-tab-button>
        
        <ion-tab-button tab="tab3" href="/tabs/tab3">
           <div class="Icono">
          <img src="../../public/assets/resources/icono3.png"/>
          </div>
          <ion-label>Post-Flight</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script lang="ts">
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonPage, IonRouterOutlet } from '@ionic/vue';

export default {
  components: { IonLabel, IonTabs, IonTabBar, IonTabButton, IonPage, IonRouterOutlet },
}
</script>

<style scoped>
.Icono img{
  max-height: 30px;
}
</style>

Thanks!

1 post - 1 participant

Read full topic