<main class="main dashboard-page dashboard-page-users" id="dashboardPageUsersTable">
    <div class="main-content">
        <div class="dashboard-table-tools">
            <div>
                userGroup
            </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>
new Vue({
            el: '#dashboardPageUsersTable',
            data: {
                userGroup: 'all',
                usersTable: ''
            },
            mounted() {
                this.userGroupOnChange();
            },
            methods: {
                userGroupOnChange: function () {
                  
                  
                  fetch('https://swapi.co/api/people/1')
                        .then((response) => {
                                if (response.ok) {
                                    return response.text();
                                } else {
                                    throw new Error('Network response was not ok');
                                }
                            }
                        )
                        .then((response) => {
                            this.usersTable = response;
                        })
                        .catch((error) => {
                            alert(error.message);
                        });
                  
                }
            }
        }
    )


function updateHandlers() {
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js