How to deal with asyncronous data?

[ywiyogo]

Hi, based on the example in https://github.com/linmasahiro/vue3-table-lite/blob/master/src/examples/Filter.vue, how can I deal with a data that come from axios or database fetch? The computed function in the row field doesn't accept async/await function.

For example if I move the data initialisation to a test function.

const test = () => {
  for (let i = 0; i < 126; i++) {
    data.push({
      id: i,
      name: "TEST" + i,
      email: "test" + i + "@example.com",
    });
  }
}

Defining the table rows as below, will not show the data:

rows: computed(async () => {
    const ret = await setTimeout(test, 3000);
    return data.filter(
      (x) =>
        x.email.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
        x.name.toLowerCase().includes(searchTerm.value.toLowerCase())
    );
  }),

However, removing the async/await keywords can show the data.

[linmasahiro]

Hi @ywiyogo

I wrote an example for you. Hope helpful you

updated: I am already added the example to document, if you want to check the result, click me.

<template>
  <div style="text-align: left">
    <label>SearchBy:</label><input v-model="searchTerm" />
  </div>
  <table-lite
    :is-static-mode="true"
    :is-loading="table.isLoading"
    :columns="table.columns"
    :rows="table.rows"
    :total="table.totalRecordCount"
    :sortable="table.sortable"
  ></table-lite>
</template>

<script>
import { defineComponent, reactive, ref, computed, watch } from "vue";
import TableLite from "../components/TableLite.vue";

export default defineComponent({
  name: "App",
  components: { TableLite },
  setup() {
    const searchTerm = ref(""); // Search text

    // Fake data
    const data = reactive({
      rows: [],
    });

    /**
     * Get server data request
     */
    const myRequest = async (keyword) => {
      const fakeData = [];
      for (let i = 0; i < 126; i++) {
        fakeData.push({
          id: i,
          name: "TEST" + i,
          email: "test" + i + "@example.com",
        });
      }
      return await new Promise((resolve, reject) => {
        try {
          table.isLoading = true;
          // Remove setTimeout() and change to your Axios request or AJAX request on here.
          setTimeout(() => {
            table.isLoading = false;
            let newData = fakeData.filter(
              (x) =>
                x.email.toLowerCase().includes(keyword.toLowerCase()) ||
                x.name.toLowerCase().includes(keyword.toLowerCase())
            );
            resolve(newData);
          }, 2000);
        } catch (error) {
          console.log("Fetch error", error);
          reject();
        }
      });
    };

    // Table config
    const table = reactive({
      isLoading: false,
      columns: [
        {
          label: "ID",
          field: "id",
          width: "3%",
          sortable: true,
          isKey: true,
        },
        {
          label: "Name",
          field: "name",
          width: "10%",
          sortable: true,
        },
        {
          label: "Email",
          field: "email",
          width: "15%",
          sortable: true,
        },
      ],
      rows: computed(() => {
        return data.rows;
      }),
      totalRecordCount: computed(() => {
        return table.rows.length;
      }),
      sortable: {
        order: "id",
        sort: "asc",
      },
    });

    /**
     * Use vue.js watch to watch your state's change
     */
    watch(
      () => searchTerm.value,
      (val) => {
        myRequest(val).then((newData) => {
          data.rows = newData;
        });
      }
    );

    // Get data on first rendering
    myRequest("").then((newData) => {
      data.rows = newData;
    });

    return {
      searchTerm,
      table,
    };
  },
});
</script>

[ywiyogo]

awesome @linmasahiro ! Thanks for the support and helping improving my knowledge about the async with Vue3!