如何將 .json 文件中的數據加載到 CDN Vue.js 應用程序中？

Question

我有一個具有以下結構的 .json 文件：

{
       "title": "A"
       "name": "B"
},
{
           "title": "C"
           "name": "D"
},

我想在我的 Vue.js 應用程序中使用這些數據。 當我手動將數據復制到我的應用程序時，一切正常：

<script>
  
  new Vue({
    el: '#app',
    data: {
      items: [
    {
           "title": "A"
           "name": "B"
    },
    {
         "title": "C"
         "name": "D"
    },
    ]

如何將數據直接加載到我的 Vue 應用程序中，而無需手動復制 .json 文件的內容？

（我使用 CDN 加載 Vue.js，因此通常的“導入”解決方案不起作用。）

Answer 1

你可以這樣做：

new Vue({
    el: '#app',
    data: {
        items: null
    },
    created() {
        axios
            .get('./myJson.json')
            .then(response => {
                this.items = response.data;
            })
            .catch((e) => {
                console.error(e)
            })
    }
});

您可以通過 CDN 導入 Axios：

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.min.js"></script>

並且，確保您的 JSON 格式正確：

[
  {
    "title": "A",
    "name": "B"
  },
  {
    "title": "C",
    "name": "D"
  }
]