/Dear All, I would like to create a table from this API created JSON object, how can I use v-for in Vue js ? design is not important I just cannot implement v-for in this case? the table should not be fancy just a plane html table/

<template>
  <div id="app">
    <table>
    <thead>
      <tr>
        <th>id</th>
        <th>meta</th>
        <th>title</th>
        <th>is private</th>

        </tr>
    </thead>
      
    </table>
  
  </div>

</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items:''
    }
  },


  created() {
    axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/pages/`)
    .then(response => {
     
      this.items = response.data
    })
    
  }
}

</script>

<style>

</style>

CodePudding user response：

Your HTML table:

<table>
      <thead>
        <tr>
          <th>id</th>
          <th>meta</th>
          <th>title</th>
          <th>is private</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.meta.detail_url }}</td>
          <td>{{ item.title }}</td>
          <td>{{ item.is_private }}</td>
        </tr>
      </tbody>
    </table>

Script:

async created() {
    const response = await axios.get(
      `https://zbeta2.mykuwaitnet.net/backend/en/api/v2/pages/`
    );
    this.items = response.data.items;
  },