A PetiteVue Tutorial - 03 Fetching Data

We now have a table that is being generated dynamically from a list. However the list is currently hardcoded in. We're going to still hardcode the list but we are going to move it out of the petite-vue area and make it easier for the list to be fetched.

The Javascript

This step will involve writing a new function to get the data and also hooking into the vue mounted event.

<script type="module">
    import { createApp } from '/js/petite-vue.es.js'

    async function getWorkers() {
        const workers = [
            { name: "Airi Satou", position: "Accountant", office: "Tokyo", age: 33},
            { name: "Angelica Ramos", position: "Chief Executive Officer (CEO)", office: "London", age: 47 },
            { name: "Cedric Kelly", position: "Senior Javascript Developer", office: "Edinburgh", age: 22 },
            { name: "Jennifer Chang", position: "Regional Director", office: "Singapore", age: 28 },
        ];
        return workers;
    }

    async function mounted() {
        this.workers = await getWorkers();
    }

    createApp({
        workers: [],
        mounted,
    }).mount("#app");
</script>

The first thing we do is move the data from inside the createApp call to outside. This will make it easier to see what we need to do to make our function work dynamically. We can now easily replace our hardcoded list with one that is fetched from a server.

We default the workers in the petitevue application to empty list. This way we can test for the empty list and show a message like waiting for data....

The next thing to note is the mounted function. Our mounted function will run once PetiteVue is initialized and loaded. This way we aren't stuck with a strange page while we fetch data from elsewhere.

The mounted function will call our getWorkers function and it will populate the workers variable once the data arrives.

The HTML

Now let's look at the view:

<div id="app" @vue:mounted="mounted">
    <div v-if="workers.length === 0">Waiting for data...</div>
    <table v-else>
        ...
    </table>
</div>

Here we add the @vue:mounted attribute to our div. This way petitevue will run whatever it can and get the div working as much as it can. Once everything that it can do is done, it will run trigger the mounted event and our mounted function will be run.

The next thing to note is that we now have a conditional in our template. We are checking the length of the workers variable and if it's 0 then it means that we are still waiting for data. If the length is anything else, we will populate a table.

We can add other things here like error checking. We can add a error variable that we update with a message if there was an error in the fetch call.

This if conditional is also why we need the mounted event. We want to start the page off with the waiting for data message and only when we get all the data do we want to load in the table.

Now if you refresh the page, you should see the table immediately. You can update the getWorkers function to return an empty list and you will see our message that out application is waiting for data.

With that we are done! We can now get data from a server and we can show a waiting message if the network is slow.

In the next chapter we will look at searching a table!