Vue 3 Composition API with Ionic 5 (vue) - AceLords Skeleton

Home.vue

<template>
  <base-layout :page-title="appName" :hide-back-button="true">
    <template #drawer>
      <!-- <common-drawer></common-drawer> -->
    </template>
    <template #actions-start>
      <ion-menu-button menu="main-menu"></ion-menu-button>
    </template>
    <template #actions-end>
      <ion-button router-link="/memories/add">
        <ion-icon slot="icon-only" icon="add"></ion-icon>
      </ion-button>
    </template>

    <div>
      <!-- <base-loader></base-loader>  -->

      <base-loader v-if="loading"></base-loader> 

      <div>
        <ion-list v-if="list && list.data">
          <ion-item v-for="(item, i) in list.data" :key="i">
            <ion-title>{{ item.name }}</ion-title>
            <ion-text>{{ item.phone }}</ion-text>
          </ion-item>
        </ion-list>
      </div>
    </div>

    <template #tabs>
      <!-- <common-tabs></common-tabs> -->
    </template>
  </base-layout>
</template>

<script>
import { appName } from '@/utils/Constants'
import { defineComponent, ref, reactive, computed, watch, onMounted } from 'vue'
import UserRequest from "@/modules/zirah/user-requests/UserRequest"

export default defineComponent({
  name: "Home",
  components: {
    //
  },
  data() {
    return {
      appName,
      // obj: new UserRequest(),
      // loading: false,
      // dialog: false,
    }
  },
  // computed: {
  //   list() {
  //     return this.obj.list
  //   },
  //   initialised() {
  //     return this.list
  //   },
  //   submitted() {
  //     return this.obj.form.submitted
  //   },
  //   contaminated() {
  //     return this.obj.form.errorDetected
  //   },
  //   errors() {
  //     return this.obj.form.errors
  //   },
  //   selected() {
  //     return this.obj.selected
  //   },
  //   links() {
  //     return this.list.links
  //   },
  //   meta() {
  //     return this.list.meta
  //   },
  // },
  // watch: {
  //   initialised(val) {
  //     if(val)
  //       this.loading = false;
  //   },
  //   submitted(val) {
  //     if(val) {
  //       this.loading = false;
  //       this.dialog = false;
  //     }
  //   },
  //   contaminated() {
  //     this.loading = false;
  //   }
  // },
  // methods: {
  //   initialize() {
  //     this.loading = true;
  //     this.obj.index();
  //   },
  //   submit() {
  //     this.loading = true;
  //     this.obj.save();
  //   },
  //   update() {
  //     this.loading = true;
  //     this.obj.update();
  //   },
  // },
  // mounted() {
  //   this.initialize()
  // },
  setup() {
    // data
    const loading = ref(false);
    const dialog = ref(false);
    const obj = reactive(new UserRequest());

    // computed properties
    const list = computed(() => obj.list)
    const initialised = computed(() => !!list.value)
    const submitted = computed(() => obj.form.submitted)
    const contaminated = computed(() => obj.form.errorDetected)
    const errors = computed(() => obj.form.errors)
    const selected = computed(() => obj.selected)
    const links = computed(() => list.value.links)
    const meta = computed(() => list.value.meta)

    // watchers
    watch(initialised, (val) => {
      if(val)
        loading.value = false;
    })
    watch(submitted, (val) => {
      if(val) {
        loading.value = false;
        dialog.value = false;
      }
    })
    watch(contaminated, () => {
      loading.value = false;
    })

    // methods
    const initialize = () => {
      loading.value = true;
      obj.index();
    }
    const submit = () => {
      loading.value = true;
      obj.save();
    }
    const update = () => {
      loading.value = true;
      obj.update();
    }

    // mounted/created
    onMounted(initialize)

    return {
      loading,
      dialog,
      obj,

      initialised,
      submitted,
      contaminated,
      errors,
      list,
      selected,
      links,
      meta,

      initialize,
      submit,
      update,
    };
  },
})
</script>