dmitrybascacov
@dmitrybascacov
Кодим и декодим, а иногда кино смотрим

Как перерендрить html во Vue.js?

Использую 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:
выложил полный код
  • Вопрос задан
  • 133 просмотра
Пригласить эксперта
Ответы на вопрос 2
Athanor
@Athanor
Лайк + Решение: не жмись, нажми
Рискну предположить, что переменная usersTable у вас не объявлена в data, поэтому она не является реактивной, поэтому ничего не перерендеривается при ее изменении.
Ответ написан
Kozack
@Kozack
Похоже, что сам код вполне рабочий, все данные реактивны и автоматически обновляют view:


Даже с использованием fetch:


Предположу что проблема может крыться в вашем сервере или в данных которые он возвращает.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Enapter Санкт-Петербург
от 160 000 до 240 000 ₽
Junto Москва
от 120 000 до 180 000 ₽
25 февр. 2020, в 13:06
2000 руб./за проект
25 февр. 2020, в 12:59
50000 руб./за проект
25 февр. 2020, в 12:51
2000 руб./за проект