"Why isn't v-for looping over elements in petite-vue printing?"

SrSbSd
May 19, 2023
142 views
0 votes
2 Answers

I like the idea of Petite-vue. However, I am unable to get the simplest things working, unfortunately I can not find many examples and tutorials for petite-vue online. Any recommendations for good resources?

Here I am simply trying to print the output of a json file. I ended up defining the json object after it did not work. But I am still not getting the items printed in the for loop. Any idea what might be the issue?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/petite-vue" defer init></script>
  </head>
  <body>
    <h1> show data here:</h1>
    <div id="app">
      <div v-for="(item, index) in items" :key="index">
        <h2>{{ item.title }}</h2>
      </div>
    </div>

    <script type="module">
    import { createApp } from 'https://cdn.skypack.dev/petite-vue'

    const jsonData = [
      { title: 'Title 1'},
      { title: 'Title 2'},
      { title: 'Title 3'}
    ]

    createApp({
      data() {
        return {
          items: []
        }
      },
      mounted() {
        this.items = jsonData
      }
    }).mount('#app')
    </script>
  </body>
</html>

Answers

The problem happens due to the duplicate imports. Either you can use:

<script src="https://unpkg.com/petite-vue" defer init></script>

// and use v-scope

or you need to use:

import { createApp } from 'https://unpkg.com/petite-vue?module'

createApp({...})

Also there’s no data in petite-vue createApp. You need to add items directly. Check following code:

<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>show data here:</h1>
    <div id="app">
      <div v-for="(item, index) in items" :key="index">
        <h2>{{ item.title }}</h2>
      </div>
    </div>

    <script type="module">
      import { createApp } from "https://cdn.skypack.dev/petite-vue";

      const jsonData = [
        { title: "Title 1" },
        { title: "Title 2" },
        { title: "Title 3" },
      ];

      createApp({
        items: jsonData,
      }).mount("#app");
    </script>
  </body>
</html>

Some documentation here mounted hook is different, no data function …

<h1> show data here:</h1>
<div id="app" @vue:mounted="getData">
  <div v-for="(item, index) in items" :key="index" >
    <h2>{{ item.title }}</h2>
  </div>
</div>

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

const jsonData = [
  { title: 'Title 1'},
  { title: 'Title 2'},
  { title: 'Title 3'}
]

createApp({
  items: [],

  getData() {
    this.items = jsonData
  }
}).mount('#app')
</script>

Please signup or login to give your own answer.

Click here to cancel reply.

“Why isn’t v-for looping over elements in petite-vue printing?”

Answers