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>