如何将 .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"
  }
]