在 vue 循环中使用 Axios 从 .json 获取数据

Question

在我的导航中，我想插入来自我的 CMS 的链接。我正在使用 Axios。我的导航是 Vue。如何从 JSON 文件中获取数据到 const？

知道我是否需要在 Axios 或 Vue 中搜索解决方案也会有很大帮助。

import axios from "axios";

const exhibitions = [
    {
    name: "Exhibition 1",
    description: "Info 1",
    href: "#",
    },

    {
    name: "Exhibition 2",
    description: "Info 2",
    href: "#",
    },    
];

我的导出默认值：

export default {
  name: "item",
  data() {
    return {
      info: null,
    };
  },
  mounted() {
    axios
      .get("http://localhost:8000/posts.json")
      .then((response) => (this.info = response));
  },

posts.json

{
"data":
    [{
    "id":1028,
    "title":"Exhibition 1",
    "slug":"exhibition-2009",
    "url":"http://localhost:8000/exhibitions/exhibition-2009"
    },
    {
    "id":905,
    "title":"Exhibition 2",
    "slug":"exhibition-2006",
    "url":"http://localhost:8000/exhibitions/exhibition-2006"
    }],
"meta":
    {
    "pagination":
    {
    "total":2,
    "count":2,
    "per_page":100,
    "current_page":1,
    "total_pages":1,
    "links":{}
     }
     }
 }

Answer 1

“从 JSON 获取数据到 const”是什么意思？？

Just a reminder, a constant cannot be modified.

根据您的评论，我猜您希望将从 json 文件中获取的数据存储到 info 变量中。然后，在导航栏中呈现您的链接。

mounted() {
    axios
       .get("http://localhost:8000/posts.json")
       .then((response) => (this.info = response));
}

安装组件后，您将使用 Axios 从文件中获取 JSON 数据。当承诺被接受时，您将响应数据存储到 this.info。一旦你在那个变量中有了你的数据，你就可以呈现所有东西⬇️

VueJS 中有一个用于列表渲染的指令，名为 v-for。您可以使用它来呈现导航栏的所有链接。

<ul id="navigation-bar">
    <li v-for="i in info">
        <a href="{{ i.url }}"> {{ i.title }} </a>
    </li>
</ul>

在 vue 循环中使用 Axios 从 .json 获取数据

Getting data with Axios from .json in a vue loop

json

vue.js

axios

tailwind-ui