Hier noch zwei Erklärungen, wie das funktioniert:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Demo API mit Vue</title>
<meta charset="utf-8">
</head>
<body>
<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>
// 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>
const userID = 8;
url = 'https://api.vtlog.net/v1/users/' + userID + '?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>
eigentlich hatte ich mir vorgestellt, dass Du das in Eigeniniative selbst hinzu fügen kannst. Informiere dich am besten über Eventlistener und Eingabefelder (input):