I've been trying to iterate over data inside of a json file and display it in a table. However nothing shows up. I was following a tutorial set by step, and redone it 6 times and it hasn't worked properly.
<div v-for="item in data" :key="item.id">
<p> {{item.SongName}} </p>
</div>
</template>
<script>
import JsonData from '../assets/learning/songs.json'
export default {
data () {
return {
data: JsonData
}
}
}
</script>
nothing shows up when I use {{item.Songname}} but when I use {{Data}} it shows all the data fine.
{
"Songs": [
{"id": 1, "SongName": "ກອດ | Pure - Tany Vannasin", "link": "https://youtu.be/bAzGST-gOsc"},
{"id": 2, "SongName": "ຕື່ນຈາກຝັນ - BAY6IX & LALA", "link": "https://youtu.be/L0YF-qzCyJc"},
{"id": 3, "SongName": "ແພງອ້າຍ - SOPHANA", "link": "https://youtu.be/D3H3ZAFsdF4"}
]
}
You'll need to parse the imported JSON to turn it into a Javascript Object that Vue can understand.
<template>
<div v-for="item in songs" :key="item.id">
<p> {{item.SongName}} </p>
</div>
</template>
<script>
import JsonData from '../assets/learning/songs.json'
export default {
data() {
return {
songs: []
}
},
mounted(){
const parsedData = JSON.parse(JsonData);
this.songs = parsedData.Songs
}
}
</script>