Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Demo API mit Vue</title>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
</head>
<body>
    <input id="vname" type="number" name="vname">
    <input id="sendebtn" type="submit" value="senden">
    <!-- In dem folgenden Container werden die Platzhalter in doppelten geschweiften Klammern
    durch die Elemente in der Antwort vom Server ersetzt, siehe auch unten im Javascript -->
    <div id="app">
        <h1>Statistik</h1>
        <table>
            <thead>
                <th>Name</th>
                <th>Wert</th>
            </thead>
            <tbody>
                <tr>
                    <td>Jobs</td>
                    <td>{{stats.jobs}}</td>
                </tr>
                <tr>
                    <td>Economy</td>
                    <td>{{stats.economy}}</td>
                </tr>
                <tr>
                    <td>Damage</td>
                    <td>{{stats.damage}}</td>
                </tr>
                <tr>
                    <td>Odometer</td>
                    <td>{{stats.odometer}}</td>
                </tr>
                <tr>
                    <td>Fuel</td>
                    <td>{{stats.fuel}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // Eventlistener fuer Klick auf Button registrieren
        // Wird der Button geklickt, wird die Funktion getData() aufgerufen
        document.getElementById('sendebtn').addEventListener('click', getData);
        // Code für das Holen der Daten von der API in eine Funktion legen:
        function getData() {
            // Name aus dem Eingabefeld auslesen:
            const name = document.getElementById('vname').value.trim();
            url = 'https://api.vtlog.net/v1/users/' + name + '?idType=vtlog';
            new Vue({
                // Hier wird angegeben, in welchem Container die Daten
                // eingetragen werden sollen:
                el: '#app',
                data() {
                    return {
                        stats: null
                    }
                },
                mounted() {
                    axios
                        .get(url)
                        // das folgende ist eine Kurzschreibweise für eine Funktion
                        // response ist der Eingangsparameter, in diesem Fall
                        // die Antwort vom Server
                        .then(response => (
                            // das was hier unter this.stats eingetragen wird,
                            // ist oben im HTML unter stats verfuegbar
                            this.stats = response.data.response.stats
                        ));
                }
            });
        }
    </script>
</body>
</html>