Использую bootstrap-vue компонент таблицы. Как сделать, чтобы при нажатии на "Show Details", сначало отправлялся GET запрос на получение данных, и после успешного получения, открывалась строка с этими данными?
3 ответа
Пример реализации: github.
Вынесены отдельно функции получения данных с сервера (loadData) и функция нажатия на кнопку для открытия данных (details).
Функция обработки нажатия принимает два параметра: row ( текущая строка таблицы ) и type ( тип нажатия, а именно открытие или закрытие ).
Для реализации асинхронности использовались promise`ы.
Процесс подгрузки данных:
Загруженные данные:
-
Рабочий пример доступен по ссылке idushii.github.io/vue-table-line-load– Николай2 мар 2018 в 16:12
-
Для GET (и других) запросов я предлагаю вам использовать библиотеку axios
.
Вот как примерно все это будет выглядеть:
...
methods: {
showDetails (id) {
//метод вызывается при нажатии на кнопку "Show Details"
//в метод можно передать id элемента, по которому необходимо запросить информацию
axios.get('/user', {
params: {
id //в параметрах можно передать id запрашиваемого элемента (или/и любую другую требуемую информацию для запроса данных)
}
})
.then(response => {
// если запрос данных произошел успешно, то открываем строку с этими данными
})
.catch(error => {
//иначе обрабатываем ошибку
});
}
}
...
Подробнее про библиотеку axios
прочитайте тут.
Объявите свой метод, внутри которого выполняйте запрос и раскрывайте блок с деталями.
Например, пусть есть метод tooggleRow
, тогда в шаблоне навешиваем его на событие клика:
<b-button size="sm" @click.stop="toogleRow(row)" class="mr-2">
{{ row.detailsShowing ? 'Hide' : 'Show'}} Details
</b-button>
Сам метод может иметь примерно следующее содержание:
methods: {
toogleRow(row) {
// При сворачивании скрываем блок без запроса
if (row.item._showDetails) {
row.toggleDetails();
return;
}
// При разворачивании выполняем запрос
fetch('/details.json')
.then(function (res) {
return res.json();
})
.then(function (res) {
// Собираем данные
row.item.isActive = res.isActive;
row.item.age = res.age;
// Разворачиваем детали
row.toggleDetails();
});
}
}