Использую Vue.js очень небольшое количество времени и только на фронте и пока все получалось и всего хватало, но сейчас потребовалось загрузить таблицу через ajax и тут появились проблемы: таблица не перерендриается, хотя содержит v-on:click. Как исправить и какой метод нужно использовать? Пробовал Vue.render, this.$forceRende, но результата нет, хотя я мог как-то не так их использовать
Код:
(имя сайта изменено на site.name)
userGroupOnChange: function () {
fetch('http://site.name/api/v1/getUsersTable?mode=' + this.userGroup)
.then((response) => {
if (response.ok) {
return response.text();
} else {
throw new Error('Network response was not ok');
}
}
)
.then((response) => {
this.usersTable = response;
})
.catch((error) => {
console.log(error);
});
},
Результат помещается сюда:
<table class="dashboard-table" v-html="usersTable"></table>
Полный код<!doctype html>
<html lang="en">
<head>
<?php getTemplate('head') ?>
<title><?= HTML_DASHBOARD_TITLE ?> Заявки</title>
</head>
<body>
<?php getTemplate('dashboard/menu') ?>
<main class="main dashboard-page dashboard-page-users" id="dashboardPageUsersTable">
<div class="main-content">
<div class="dashboard-table-tools">
<div>
<?php generateCustomSelect('userGroup', $groups) ?>
</div>
<a href="<?= PROJECT_DASHBOARD_USERS_ADD_WEBPATH ?>" class="dashboard-table-tools-link">добавить
пользователя</a>
</div>
<table class="dashboard-table" v-html="usersTable"></table>
</div>
</main>
<?php getTemplate('scripts') ?>
<script>
new Vue({
el: '#dashboardPageUsersTable',
data: {
userGroup: 'all',
usersTable: ''
},
mounted() {
this.userGroupOnChange();
},
methods: {
userGroupOnChange: function () {
fetch('http://site.name/api/v1/getUsersTable?mode=' + this.userGroup)
.then((response) => {
if (response.ok) {
return response.text();
} else {
throw new Error('Network response was not ok');
}
}
)
.then((response) => {
this.usersTable = response;
})
.then((response) => {
this.$forceUpdate();
updateHandlers();
})
.catch((error) => {
console.log(error);
});
}
}
}
)
</script>
<script>
function updateHandlers() {
$('.dashboard-table-row-tools').on('click', function (e) {
$('.dashboard-table-row-tools').removeClass('dashboard-table-row-tools-active');
$(this).addClass('dashboard-table-row-tools-active');
});
$(document).on('click', function (e) {
if ($(e.target).closest('.dashboard-table-row-tools').length === 0) {
$('.dashboard-table-row-tools').removeClass('dashboard-table-row-tools-active');
}
})
}
</script>
</body>
</html>
UPD:
выложил полный код
