如何从 vuejs 中的 api 循环遍历 json 对象？

Question

/亲爱的大家， 我想从这个 API 创建的 JSON 对象创建一个表，我如何在 Vue js 中使用 v-for？ 设计并不重要，我只是在这种情况下无法实现 v-for？该表不应该只是一个平面html表/

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

Answer 1

您的 HTML 表格：

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

脚本：

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