I'm really interested in Petite-vue, but I've been struggling to get even the basic functionalities to work. Unfortunately, there isn't a lot of examples or tutorials available online for petite-vue. Can anyone suggest good resources?
Right now, my main issue is trying to display the output of a JSON file. I tried defining the JSON object myself when it didn't work initially. However, I'm still not able to print the items within the for loop. Any thoughts on what might be causing this problem?
<!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>