How to re-render html in Vue.js?

D

Dmitry Baskakov2020-01-16 06:28:26

Vue.js

Dmitry Baskakov, 2020-01-16 06:28:26

I use Vue.js for a very small amount of time and only at the front, and so far everything worked out and everything was enough, but now I needed to load the table via ajax and then problems appeared: the table does not re-render, although it contains v-on: click. How to fix and what method should be used? I tried Vue.render, this.$forceRende, but there is no result, although I could somehow use them wrong
Code:
(site name changed to 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);
        });
},

The result is placed here:

<table class="dashboard-table" v-html="usersTable"></table>

Full code

<!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:
posted the full code

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Athanor, 2020-01-16
@Athanor

I would venture to suggest that usersTableyour variable is not declared in data , so it is not reactive, so nothing is re-rendered when it changes.

A

Alex, 2020-01-16
@Kozack Vue.js

It seems that the code itself is quite working, all data is reactive and automatically updates the view:
Even with fetch:
I will assume that the problem may lie in your server or in the data that it returns.