Получение данных с помощью Axios из .json в цикле vue

Question

В моей навигации я хочу вставить ссылки из моей CMS. Я использую Axios. Моя навигация - это Vue. Как передать данные из файла JSON в константу?

импортировать axios из "axios";

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

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

мой экспорт по умолчанию:

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

Answer 1

Что вы имеете в виду, говоря «получить данные из JSON в константу » ??

Напоминаем, что константу нельзя изменить.

В соответствии с тем, что вы прокомментировали, я предполагаю, что вы хотите сохранить данные, полученные из вашего файла json, в info переменная . А затем отобразите свои ссылки на панели навигации.

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

После того, как компонент смонтирован, вы извлекаете данные JSON из файла с помощью Axios. Когда обещание принято, вы сохраняете данные ответа в this.info. Как только у вас есть данные в этой переменной, вы можете визуализировать все ⬇️

В VueJS есть директива для рендеринга списка под названием v-for. Вы можете использовать его для отображения всех ссылок на панель навигации.

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