VueJs 2 запрос Ajax. Как сделать так, чтобы компоненты монтировались после того как загрузятся данные?
Здравствуйте!
В проекте есть роутер, 1 главный компонент и 2 дочерних. Задача. Сделать так, что бы данные в дочерних компонентах появлялись сразу после того как данные появятся в родительском компоненте. <router-view :results="results"></router-view>
Проблема вызвана тем, что в дочерних используется jQuery плагин datatable и в него нужно подставить то что пришло от сервера. Есть вариант инициализировать пустую таблицу, а потом благадаря реактивности как то установить данные в эту таблицу. Но как это сделать? Каким событием воспользоваться?
А зачем вообще использовать jq? У вас проблема сделать сортировку и поиск на vue? Вот тут можно посмотреть подходящие примеры
А про роутинг и данный вот тут
Помимо сортировки нужно сделать пагинацию, выбор сколько записей показывать на странице и т.д. Быстрее и проще использовать что-то готовое.
За ссылку таблицы для Vue спасибо. Нормальный только vuetable-2 но он не умеет работать просто с данными по JSON ему нужен сервер, который будет постоянно возвращать ответы. Сортировку он так же делает через сервер. Есть режим использовать его только с JSON но тогда сортировка не работает(((
Остальные таблицы используются с node и require. Просто так отдельным скриптом их в страницу не встроить (я имею ввиду <script src="..."></script>
После того как данные появятся в родительском компоненте, может эмитировать событие через $emit и отслеживать это в дочернем элементе с помощью $on.
А вообще для реактивности данных между компонентами используют vuex. Это хранилище информации, которое даёт реактивность.
Передайте данные в дочерний компонент через props и повесьте на таблицу v-if какой-нибудь (типа банального props.length > 0), чтобы она показалась когда данные уже появятся.
Данные в таблице выводите через v-for="props", когда данные придут с сервера в родителя и оттуда в дочерний компонент, все автоматически обновится и заполнится.
Написал бы подробнее с примером, но с телефона не выйдет :(
Проблема в том, что это не 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(); //Дождались появления данных
}
}
});
