DEV Community

Nivethan
Nivethan

Posted on • Originally published at nivethan.dev

A PetiteVue Tutorial - 02 Tables

#javascript #vue #beginners #tutorial

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (5)

Collapse
 
psanilp profile image
Sanil •

I was trying to change the Model from external javascript. PetiteVue doesnt seem to have that out of the box.. this is a drawback.
Or do you know a solution?

Collapse
 
krowemoh profile image
Nivethan •

You might be able to make it a reactive element and then add the object to the browser's window. This will let you update the model and trigger changes in the UI from anywhere on the page. (Possibly! I think I did something similar but I don't remember the code.)

Collapse
 
psanilp profile image
Sanil •

Didnt work for me. Gave up.
It does in Alpine and Vue2.
Specifically, I want to load the previous payload from localStorage when the browser back button is clicked. OnPopState make petite Vue execute a function.

Thread Thread
 
krowemoh profile image
Nivethan • • Edited

Would something like the below work for you? You should see original name on the page load and then when you hit the back button, it should change to the new name.

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

    const store = reactive({
        name: "Original Name"
    });

    createApp({
        store
    }).mount("#app");

    window.onpopstate = (event) => {
        store.name = "New name";
        return;
    };

    history.pushState({ page: 1 }, "title 1", "?page=1");
</script>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Project</title>
        <link rel="icon" href="data:;base64,=">
    </head>
    <body>
        <div id="app">
            <h1>Hello, {{ store.name }}!</h1>
        </div>
    </body>
</html>

<style>
</style>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
psanilp profile image
Sanil • • Edited

Have you tested your code? it doesnt work for me. 'New Name' never appears
After playing around with reactive store, made this work.
Essentially, wanted a way to access the reactive object from outside Vue.
The trick is to assign the const to window.

<body>


    <div id="app" class="container p-2">
        <h1>Petite Vue - Reactive Tester</h1>
        <div class="my-2">
            <input id="myinput1" type="text" class="form-control" v-model="store.a1" ref="inp1" />
        </div>
        <div class="my-2">
            <input type="text" class="form-control" v-model="store.count" />
        </div>
        <div class="my-2">{{store}}</div>
        <input type="button" class="btn btn-dark mt-4" value="xUpdate" onclick="f1('bar')" />
    </div>



    <script type="module">
        import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

        window.store = reactive({
            count: 0,
            a1: "foo",
            inc() {
                this.count++
            }
        })

        createApp({ store }).mount("#app")

    </script>

    <script type="text/javascript">
        function f1(a) {
            window.store.a1 =a;
        }
    </script>


</body>
Enter fullscreen mode Exit fullscreen mode

Read next

tyaga001 profile image

How to Build a RAG Chatbot with Agent Cloud and MongoDB

Ankur Tyagi -

ihesami profile image

Don't use State for Theme

IHesamI -

njabulomajozi profile image

NextAuth.js over Clerk

Njabulo Majozi -

ibrastartupjourney profile image

Exploring Bark, the Open Source Text-to-Speech Model

Ibrahim Shahine -