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.
Top comments (5)
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?
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.)
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.
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.
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.