My HTML Code
<div id="app">
<table>
<thead>
<tr>
<th v-for="(header, key) in column" :key="key">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows" :key="row.id">
<td>{{ row.id }}</td>
<td>{{ row.name }}</td>
<td>{{ row.phone }}</td>
</tr>
</tbody>
</table>
</div>
I am attempting to create a JavaScript function and link it to my Vue instance in order to retrieve data from an API, but I am facing some difficulties. The Vue framework does not seem to be working properly within my HTML code. Here is the current state of my code:
var app = new Vue({
el: "#app",
data: {
column: {
id: "ID",
name: "Full Name",
phone: "Phone",
},
rows: [
{ id: "", name: "", phone: "" },
],
},
methods: {
async fetchData() {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const finalRes = await response.json();
this.rows.id = finalRes.id;
this.rows.name = finalRes.name;
this.rows.phone = finalRes.phone;
},
},
mounted() {
this.fetchData();
});
Expected Output:
ID Full Name Phone
1 Leanne Graham 1-770-736-8031 x56442
2 Ervin Howell 010-692-6593 x09125
3 Clementine Bauch 1-463-123-4447
4 Patricia Lebsack 493-170-9623 x156
5 Chelsey Dietrich (254)954-1289
6 Mrs. Dennis Schulist 1-477-935-8478 x6430
7 Kurtis Weissnat 210.067.6132
8 Nicholas Runolfsdottir V 586.493.6943 x140
9 Glenna Reichert (775)976-6794 x41206
10 Clementina DuBuque 024-648-3804