VUE.JS 3 json 使用 v-for 时数据未呈现

Question

我一直在尝试遍历 json 文件中的数据并将其显示在表格中。 然而什么也没有出现。 我是按照一个教程一步一步来的，重做了6次，还是没有正常工作。

<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>

当我使用 {{item.Songname}} 时没有任何显示，但是当我使用 {{Data}} 时它显示所有数据都很好。

{
"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"}
]
}

Answer 1

您需要解析导入的 JSON 以将其转换为 Vue 可以理解的 Javascript Object。

<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>