How can I populate a table using Vue.js 3 and the Composition API?

edit

To populate a table using Vue.js 3 and the Composition API, you can follow these steps:

1. Create a component for your table and import the necessary libraries:

<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>

1. Add a 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 }
  }
}

1. Use 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.