To populate a table using Vue.js 3 and the Composition API, you can follow these steps:
<template>
<div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { ref } from "vue";
import axios from "axios";
export default {
name: "Table",
setup() {
const items = ref([]);
axios.get("https://api.example.com/data").then((response) => {
items.value = response.data;
});
return { items };
},
};
</script>
ref
for your data and fetch the data using Axios:import { ref } from 'vue'
import axios from 'axios'
export default {
setup() {
const items = ref([])
axios.get('/api/data').then((response) => {
items.value = response.data
})
return { items }
}
}
v-for
to loop through the data and populate the table:<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
That's it! Now you have a table populated with data using Vue.js 3 and the Composition API.
Asked: 2023-04-29 07:07:35 +0000
Seen: 14 times
Last updated: Apr 29 '23