Posted on • Originally published atnivethan.dev
A PetiteVue Tutorial - 02 Tables
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:
<scripttype="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:
<divid="app"><table><thead><th>Name</th><th>Position</th><th>Office</th><th>Age</th></thead><tbody><trv-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 usingv-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)
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><scripttype="module">import{createApp,reactive}from'/js/petite-vue.es.js'conststore=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><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>Project</title><linkrel="icon"href="data:;base64,="></head><body><divid="app"><h1>Hello, {{ store.name }}!</h1></div></body></html><style></style>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> <h1>Petite Vue - Reactive Tester</h1> <div> <input type="text" v-model="store.a1" ref="inp1" /> </div> <div> <input type="text" v-model="store.count" /> </div> <div>{{store}}</div> <input type="button" value="xUpdate" /> </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>For further actions, you may consider blocking this person and/orreporting abuse
