A PetiteVue Tutorial - 02 Tables

2023-01-29

Now that we have the very basics down, let's get into looping.

We are now going to loop over a list of workers and build a table dynamically. This is going to be quite simple with PetiteVue.

The Javascript

The first step is to get our data set up. Update the script tag to look like the following:

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

    createApp({
        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 },
        ],
    }).mount("#app");
</script>

We are setting up a workers array that contains a list of worker objects.

The HTML

Now let's update the html:

<div id="app">
    <table>
        <thead>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
        </thead>
        <tbody>
            <tr v-for="worker in workers">
                <td>{{worker.name}}</td>
                <td>{{worker.position}}</td>
                <td>{{worker.office}}</td>
                <td>{{worker.age}}</td>
            </tr>
        </tbody>
    </table>
</div>

We are using v-for tag to loop through the workers that we already defined.

If we refresh the page, we should now see that the page has our workers formatted in a table.

In the next section, we will change the workers from being a static list we hardcoded to something that we retrieve from a server.