В созданном нами компоненте есть один ощутимый недостаток - данные в нём зашиты намертво и чтобы добавить новую главу, придётся перекомпилировать всё приложение, а так дела не делаются. Сейчас мы добавим возможность хранения данных во внешних файлах и будем загружать их по мере надобности.

Для начала нам понадобится Axios ( https://yarnpkg.com/ru/package/axios), именно с его помощью мы будем загружать наши json и html файлы. Установим его командой yarn add axios vue-axios, после чего добавим в main.js строки для его подключения. Выглядеть он у вас должен следующим образом:

import Vue from 'vue'
import Axios from 'axios'
import VueAxios from 'vue-axios'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

Vue.use(VueAxios, Axios)

new Vue({
  render: h => h(App),
}).$mount('#app')

Вот теперь можно взяться за загрузку внешних данных. Для начала уберём из нашего компонента (TOC.vue) все данные о разделах, для этого строку items в блоке data приведём к виду items: [], после чего перейдём к App.vue и в секцию export добавим mounted () {}. Здесь мы в дальнейшем добавим код, исполняемый при запуске нашего приложения. Блок <script></script> должен выглядеть следующим образом:

<script>
    import TOC from './components/TOC'

    export default {
        name: 'App',
        components: {
            TOC
        },

        data () {
            return {
            }
        },

        mounted () {

        }
    }
</script>

Помимо этого нам надо немного изменить тег нашего оглавления, добавить в него ref="TOC", после чего выглядеть он должен следующим образом: <TOC ref="TOC"/>. Нужно нам это для того чтобы мы могли обращаться к конкретному экземпляру созданного нами компонента.

Итак, добавим в секцию mounted код загрузки оглавления:

mounted () {
    this.axios.get("data/toc.json")
        .then(response => {
            this.$refs.TOC.items = response.data;
        })
        .catch(error => {
            console.log(error);
        });
}

Готово! Всё работает, убедиться в этом можете открыв консоль браузера и обнаружив там ошибку "Request failed with status code 404". Чтобы от неё избавиться, создайте в каталоге public/data файл toc.json и заполните его данными о разделах. Готовый файл можно получить по ссылке /data/toc.json и сохранить его в public/data/toc.json. После этого оглавление будет загружаться из него.

Оглавление у нас есть, осталось реализовать загрузку статей. Для того чтобы сделать это, погрузимся немного в принципы работы нашего компонента. Каждый раз при выборе элемента, у компонента изменяется свойство active и нам надо отслеживать его изменение в App.vue. Для этого добавим в mounted файла App.vue следующий код:

this.$watch(
    "$refs.TOC.active",
    (newVal, oldVal) => {
        if (newVal.length) {
            this.axios.get("data/id" + newVal + ".html")
                .then(response => {
                    this.text = response.data;
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }
);

Остаётся только создать файлы с содержимым статей. Вы можете скачать их из git или по следующим ссылкам:

А теперь попробуйте самостоятельно добавить при старте приложения загрузку и отображение информации о нём. Файл с информацией можно взять на git или по следующей ссылке: /data/start.html.

Загрузка данных