OK, ich habe es zunächst mal einfach gemacht und nur die stats angezeigt:
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>
<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({
el: '#app',
data() {
return {
stats: null
}
},
mounted() {
axios
.get(url)
.then(response => (
this.stats = response.data.response.stats
));
}
});
</script>
</body>
</html>Leider habe ich keine Zeit mehr, um Erklärungen zu schreiben. Vielleicht später.
ja, aller Anfang ist schwer und ein Formular, das Daten in die Datenbank einträgt, ist schon eine etwas anspruchsvollere Aufgabe.