gistfile1.txt

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Pendanaan</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-segment
        :value="tabs"
        :scrollable="true"
        @ionChange="segmentChanged($event)"
      >
        <ion-segment-button value="0">
          <ion-label>Penawaran</ion-label>
        </ion-segment-button>
        <ion-segment-button value="1">
          <ion-label>Didanai</ion-label>
        </ion-segment-button>
        <ion-segment-button value="2">
          <ion-label>Berjalan</ion-label>
        </ion-segment-button>
        <ion-segment-button value="3">
          <ion-label>Selesai</ion-label>
        </ion-segment-button>
      </ion-segment>

      <ion-slides
        pager="true"
        :options="slideOpts"
        ref="mySlide"
        @ionSlideDidChange="ionSlideDidChange"
      >
        <ion-slide>
          <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 4</h1>
        </ion-slide>
      </ion-slides>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonContent,
  IonSegment,
  IonSegmentButton,
  IonLabel,
  IonSlides,
  IonSlide,
} from "@ionic/vue";
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  components: {
    IonPage,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonSegment,
    IonSegmentButton,
    IonLabel,
    IonSlides,
    IonSlide,
  },
  setup() {
    const slideOpts = {
      initialSlide: 0,
      speed: 400,
    };

    const mySlide = ref<any>(null);
    const tabs = ref<number>(0);

    const ionSlideDidChange = async (value: any) => {
      tabs.value = await value.target.getActiveIndex();
    };

    const segmentChanged = async (value: any) => {
      tabs.value = value.detail.value;
    };

    onMounted(() => {
      console.log(mySlide.value); // null result ?
    });

    return {
      slideOpts,
      tabs,
      ionSlideDidChange,
      segmentChanged,
    };
  },
});
</script>

<style scoped>
ion-slides {
  height: 100%;
}
</style>