我如何循环通过json对象从API在vuejs?

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;
},