如何将 .json 文件中的数据加载到 CDN Vue.js 应用程序中？

【问题标题】：How can I load the data from a .json file into a CDN Vue.js app?如何将 .json 文件中的数据加载到 CDN Vue.js 应用程序中？
【发布时间】：2020-12-19 07:46:21
【问题描述】：

我有一个具有以下结构的 .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，因此通常的“导入”解决方案不起作用。）

【问题讨论】：

标签： javascript json vue.js vuejs2

【解决方案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"
  }
]

【讨论】：

您可以使用fetch 代替 axios，这样您就不必导入另一个库。
True @KonradLinkowski - 但是，出于several 的原因，我确实喜欢 axios 而不是 fetch。