VueJS/public/data/id304.html

<h1>Добавление диалогов</h1>
<h2>Диалог с сообщением</h2>
<p>
    Некоторые ссылки в нашем приложении пока ведут в никуда и единственная реакция на щелчок по ним - это сообщение
    в консоли, что не особо информативно, исправим этот недочёт. Создадим новый компонент MessageDialog.vue и, не
    изобретая велосипедов, возьмём готовое решение для модального диалога из документации к Vuetify:
    <a href="https://vuetifyjs.com/ru/components/dialogs" target="_blank">https://vuetifyjs.com/ru/components/dialogs</a>,
    немного его модифицировав:

    <div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
        <pre>
&lt;template>
    &lt;v-layout row justify-center>
        &lt;v-dialog
            v-model="dialog"
            persistent
            max-width="290"
        >
            &lt;v-card>
                &lt;v-card-title class="headline">{{ title }}&lt;/v-card-title>
                &lt;v-card-text>{{ text }}&lt;/v-card-text>
                &lt;v-card-actions>
                    &lt;v-spacer>&lt;/v-spacer>
                    &lt;v-btn color="green darken-1" flat @click="dialog = false">Ok&lt;/v-btn>
                &lt;/v-card-actions>
            &lt;/v-card>
        &lt;/v-dialog>
    &lt;/v-layout>
&lt;/template>

&lt;script>
    export default {
        data () {
            return {
                dialog: false,
                title: "",
                text: ""
            }
        }
    }
&lt;/script>
        </pre>
    </div>
</p>
<p>
    Подключите диалог, добавив в блок <code>&lt;script>&lt;/script></code> файла App.vue строку
    <code>import MessageDialog from './components/MessageDialog'</code> и ниже в <code>components: {}</code>
    строку <code>MessageDialog</code>. Начало блока <code>&lt;sctipt>&lt;/script></code> должно выглядеть следующим
    образом:

    <div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
        <pre>
&lt;script>
    import MessageDialog from './components/MessageDialog'
    import TOC from './components/TOC'

    export default {
        name: 'App',
        components: {
            MessageDialog,
            TOC
        },
        </pre>
    </div>
</p>
<p>
    В конец блока <code>&lt;v-app>&lt;/v-app></code> добавьте строку
    <code>&ltMessageDialog ref="MessageDialog" /></code>, после чего останется только в коде скрипта добавить
    в секции .catch каждого обращения к Axios строки вызова нашего диалога с сообщением об ошибке:

    <div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
        <pre>
.catch(error => {
    console.log(error);
    this.$refs.MessageDialog.title = "Ошибка";
    this.$refs.MessageDialog.text = error;
    this.$refs.MessageDialog.dialog = true;
});
        </pre>
    </div>
    Теперь все ошибки при загрузке файлов будут показаны пользователю.
</p>

<h2>Диалог с индикатором загрузки</h2>
<p>
    При медленном соединении наше приложение будет загружать данные молча, ни коим образом не оповещая пользователя о
    том, что оно работает, это нехорошо, давайте выводить при загрузке индикатор. Создадим компонент LoadingDialog.vue
    как всегда воспользовавшись шаблоном vuetify:

    <div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
        <pre>
&lt;template>
    &lt;div class="text-xs-center">
        &lt;v-dialog
            v-model="dialog"
            hide-overlay
            persistent
            width="300"
        >
            &lt;v-card
                color="primary"
                dark
            >
                &lt;v-card-text>
                    Загружаю данные, ожидайте...
                    &lt;v-progress-linear
                        indeterminate
                        color="white"
                        class="mb-0"
                    >
                    &lt;/v-progress-linear>
                &lt;/v-card-text>
            &lt;/v-card>
        &lt;/v-dialog>
    &lt;/div>
&lt;/template>

&lt;script>
    export default {
        data () {
            return {
                dialog: false
            }
        },

        watch: {
            dialog (val) {
                if (!val) return
            }
        }
    }
&lt;/script>
        </pre>
    </div>
</p>
<p>
    Предлагаю вам самостоятельно подключить его в App.vue, добавив нужные строки в блоки шаблона и скрипта. В шаблоне
    значение ref установите равным "LoadingDialog".
</p>
<p>
    Справились? Теперь добавим код для отображения и скрытия диалога при загрузке файла в секцию mounted:
    <div class="grey lighten-2" style="overflow-x: auto; border-radius: 5px;">
        <pre>
mounted () {
    this.$refs.LoadingDialog.dialog = true;

    this.axios.get("data/start.html")
        .then(response => {
            this.text = response.data;
            this.$refs.LoadingDialog.dialog = false;
        })
        .catch(error => {
            this.$refs.LoadingDialog.dialog = false;
            console.log(error);
            this.$refs.MessageDialog.title = "Ошибка";
            this.$refs.MessageDialog.text = error;
            this.$refs.MessageDialog.dialog = true;
        });

    this.$refs.LoadingDialog.dialog = true;

    this.axios.get("data/toc.json")
        .then(response => {
            this.$refs.TOC.items = response.data;
            this.$refs.LoadingDialog.dialog = false;
        })
        .catch(error => {
            this.$refs.LoadingDialog.dialog = false;
            console.log(error);
            this.$refs.MessageDialog.title = "Ошибка";
            this.$refs.MessageDialog.text = error;
            this.$refs.MessageDialog.dialog = true;
        });

    this.$watch(
        "$refs.TOC.active",
        (newVal, oldVal) => {
            if (newVal.length) {
            this.$refs.LoadingDialog.dialog = true;
            this.axios.get("data/id" + newVal + ".html")
                .then(response => {
                    this.text = response.data;
                    this.$refs.LoadingDialog.dialog = false;
                })
                .catch(error => {
                    this.$refs.LoadingDialog.dialog = false;
                    console.log(error);
                    this.$refs.MessageDialog.title = "Ошибка";
                    this.$refs.MessageDialog.text = error;
                    this.$refs.MessageDialog.dialog = true;
                });
            }
        }
    );
}
        </pre>
    </div>
</p>
<p>
    Всё, теперь во время загрузки данных мы будем видеть сообщение с бегунком.
</p>
<p>
    P.S. Текст данной части можно взять тут: <a href="../data/id304.html" target="_blank">/data/id304.html</a>
</p>
<p>
    P.P.S. Финальную версию можно скомпилировать командой <code>yarn build</code>.
</p>