<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>List of all persons</title>
    <style type="text/css">
        body {
            padding: 50px;
        }

        .persons, .persons td {
            border: 1px solid lightgray;
            padding: 5px;
        }
    </style>
    <script src="webjars/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<h1>Persons:</h1>
<!-- Mount point -->
<table class="persons" id="persons-table">
    <thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
    </tr>
    </thead>
    <tbody>
    <!-- This is a Vue2 template -->
    <tr v-for="person in persons">
        <td>{{ person.id }}</td>
        <td>{{ person.name }}</td>
    </tr>
    </tbody>
</table>
<script>
    // fetch, ES6, Vue
    fetch('/api/persons')
        .then(response => response.json())
        .then(persons => {
            new Vue({
                el: '#persons-table',
                data: {
                    persons: persons
                }
            })
        });
</script>
</body>
</html>
