A Vue3 Tutorial - 03 Fetching Data

https://github.com/Krowemoh/vue3-without-build

Now that we can display the data, we have one issue. The data is hardcoded into our code. In the real world, we fetch the data and only display the data if it's available. We aren't going to set up an actual server and do a real fetch but we can abstract everything so that it will be simple to add a fetch statement later.

The first thing we need to do is move our workers variable elsewhere where we can pretend to fetch it. We then need to get this fetched data once our application loads.

Vue.createApp({
    data() {
        return {
            name: 'Nivethan',
            workers: [],
        }
    },
    methods: {
        async 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 },
            ];
            this.workers = workers;
        }
    },
    mounted() {
        this.getWorkers();
    }
}).mount('#app')

The first thing we do is change our workers variable in data to be an empty array. We still need to initialize it.

The next thing we do is add a new parameter to our vue application called methods. This is an object that will hold functions we can call from within the application.

We can write the async function getWorkers which we will contain the fetching code. Here we have the workers still hardcoded but we can easily swap this out for an awaited fetch call.

Finally we add one more function our vue object. This is the mounted function, this goes outside the methods as this is a vue specific function like data. The mounted function will run once our application is ready and it will call getWorkers.

Once getWorkers runs, it will populate the workers variable and voila! Our screen should update with our new data.

If we refresh the screen, not much will have changed but we'll know, deep down, inside we'll know!

Before we wrap up this section, it would be nice to be able to show a message for when we don't have workers yet.

We can do this by using conditionals.

<div v-if="workers.length === 0">No workers available.</div>

<div v-else>
    <table>
        ...
    </table>
</div>

We check to see if the array has anything in it and then print out a message if there is none. Otherwise, we can display the table.

The v-else could go on the table but I prefer using divs.

To test this logic, you can remove the assignment of workers to this.workers in our getWorkers function.

With that, we have our application ready to fetch data and display it!