VueJs 2 запрос Ajax. Как сделать так, чтобы компоненты монтировались после того как загрузятся данные?

Question

[Александр Савенко]

Здравствуйте!
В проекте есть роутер, 1 главный компонент и 2 дочерних. Задача. Сделать так, что бы данные в дочерних компонентах появлялись сразу после того как данные появятся в родительском компоненте.
<router-view :results="results"></router-view>

Проблема вызвана тем, что в дочерних используется jQuery плагин datatable и в него нужно подставить то что пришло от сервера. Есть вариант инициализировать пустую таблицу, а потом благадаря реактивности как то установить данные в эту таблицу. Но как это сделать? Каким событием воспользоваться?

Answer 1

[Алексей Шашенков]

А зачем вообще использовать jq? У вас проблема сделать сортировку и поиск на vue?
Вот тут можно посмотреть подходящие примеры
А про роутинг и данный вот тут

Comments

[Александр Савенко]

Помимо сортировки нужно сделать пагинацию, выбор сколько записей показывать на странице и т.д. Быстрее и проще использовать что-то готовое.
За ссылку таблицы для Vue спасибо. Нормальный только vuetable-2 но он не умеет работать просто с данными по JSON ему нужен сервер, который будет постоянно возвращать ответы. Сортировку он так же делает через сервер. Есть режим использовать его только с JSON но тогда сортировка не работает(((
Остальные таблицы используются с node и require. Просто так отдельным скриптом их в страницу не встроить (я имею ввиду
<script src="..."></script>

Answer 2

[WebDev]

После того как данные появятся в родительском компоненте, может эмитировать событие через $emit и отслеживать это в дочернем элементе с помощью $on.
А вообще для реактивности данных между компонентами используют vuex. Это хранилище информации, которое даёт реактивность.

Comments

[Alexander]

Вообще поток событий во vue идёт как props down, events up, то есть вызывать события должен компонент-потомок, а слушать их нужно в родителе.

Но через Event Bus можно сделать и все наоборот, конечно.

Answer 3

[Alexander]

Передайте данные в дочерний компонент через props и повесьте на таблицу v-if какой-нибудь (типа банального props.length > 0), чтобы она показалась когда данные уже появятся.

Данные в таблице выводите через v-for="props", когда данные придут с сервера в родителя и оттуда в дочерний компонент, все автоматически обновится и заполнится.

Написал бы подробнее с примером, но с телефона не выйдет :(

Comments

[Александр Савенко]

Проблема в том, что это не DOM должен получать данные, а jQuery плагин. Сам плагин я в компоненте инициализирую в mount(). Что получается:
В дочернем компоненте JQuery плагин уже запустился, но без данных, а данные опоздали и подошли позже.
Сейчас я сделал так, но не знаю правильно или нет:

<router-view :results="results"></router-view>

Vue.component('TasksListComponent', {
    props: ['results'],
    mounted() {
        this.setData();  //вызывается когда переход опять осуществился к этому компоненту и данные уже есть
    },
    methods: {
        setData: function () {
            let result = this.results;
            if (result.length > 0) {
                $('#table_tasks').DataTable({
                    "data": result,
                });
            }
        }
    },
    watch: {
        results: function () {
            this.setData(); //Дождались появления данных
        }
    }
});

[Alexander]

Александр Савенко: думаю правильно, особенно если работает и вас устраивает :)