Vue test

Vue Bootstrap Test

HTML

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/bootstrap/bootstrap.min.css}" rel='stylesheet'>
    <link th:href="@{/fontawesome/all.css}" rel='stylesheet'>
    <link th:href="@{/bootstrap-table/bootstrap-table.min.css}" rel='stylesheet'>    
    <meta charset="UTF-8">
    <title>Users</title>
</head>
<body>

<div th:replace="fragments/header :: header"></div>
<div th:replace="fragments/admin-page-title :: admin-page-title ('Users Administrative Page')"></div>

<br><br>
<div class="container" id="vuecontainer">

<div class="container" id="main">
    <table class="table table-striped table-bordered"
        data-toggle="table"
        data-toolbar="#toolbar"
        data-search="true"
        data-show-search-clear-button="true"
        data-trim-on-search="false"
        data-show-fullscreen="true"
        data-show-pagination-switch="true"
        data-pagination="true"
        data-page-size="10"
        data-side-pagination="client"
        data-page-list="[10, 25, 50, 100, 200, All]"
        data-sortable="true"
        data-show-columns="true"
        data-show-columns-toggle-all="true"
        data-minimum-count-columns="3">
        <thead>
        <tr class="text-left">
            <th scope="col" data-sortable="true">First Name</th>
            <th scope="col" data-sortable="true">Last Name</th>
            <th scope="col" data-sortable="true">Role</th>
            <th scope="col">Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="user in users">
            <td>{{ user.firstName }}</td>
            <td>{{ user.lastName }}</td>
            <td>{{ user.role.name }}</td>
            <td>
                <a href="#" v-on:click="showEditUser(user)" class="edit"><i class="far fa-edit"></i></a>
                <a href="#" v-on:click="showEditUser(user)" class="delete"><i class="far fa-trash-alt"></i></a>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<!-- Edit...