我想創建一個表并使用 vue.js 和 v-for 用資料填充它，但我不知道如何訪問嵌套的 JSON 檔案。
如果我簡單地呼叫 {{items}} 資料會顯示，但我無法過濾它
這是我的代碼：
<template>
<div id="app">
<thead>
</thead>
<tbody>
<table>
<thead>
<tr>
<th>id</th>
<th>press</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.results.downloadable.document_en }}</td>
<td>{{ item.}}</td>
</tr>
</tbody>
</table>
</tbody>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
items:[]
}
},
created() {
axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`)
.then(response => {
this.items = response.data
})
}
}
</script>
uj5u.com熱心網友回復：
根據端點的結果，您應該將專案分配更改為
.then(response => {
this.items = response.data.results
})
而你的回圈
<tr v-for="item in items" :key="item.id">
<td>{{ item.id }}</td>
<!-- as downloadable is an array, see update below etc. -->
</tr>
但請注意 - 如果您data.results直接分配 ，您將丟失所謂的“分頁器”資訊，該資訊還包含加載更多鏈接。
所以另一種選擇是分配
this.items = response.data
但是，請注意，您應該將資料中的專案定義為 null 或空物件（不是陣列，因為這將是錯誤的）
然后將您的回圈更改為這樣的（它現在在回圈中item.results）
<tbody v-if="items && items.results">
<tr v-for="item in items.results" :key="item.id">
<td>{{ item.id }}</td>
<!-- as downloadable is an array - see Update below etc. -->
</tr>
</tbody>
這種方法將允許您通過items.count例如顯示總計數
更新：
其實downloadable是一個陣列！我只能假設您在這里真正想要實作的目標。我創建了一個 jsfiddle 來展示它：https ://jsfiddle.net/v73xe4m5/1/
您可能想要做的主要事情是過濾條目以僅顯示downloadable包含 document_en 的條目。
<tr v-for="item in items.results" :key="item.id">
<td>{{ item.id }}</td>
<td>
<div class="downloads">
<span
v-for="downloadable in item.downloadable.filter(d => !!d.document_en)"
:key="downloadable.id"
>{{ downloadable.document_en.file }}</span>
</div>
</td>
</tr>
我不熟悉那個端點/api - 所以我不知道它是否可能會為每個專案回傳一個以上的相關檔案。
正如你所看到的，我在里面使用了第二個 v-for 回圈<td>來瀏覽所有可下載的條目。在這樣做之前，它們會被過濾，因此只顯示實際具有 document_en 值的條目。您可以根據需要進行調整。
希望有幫助！
uj5u.com熱心網友回復：
這是從 json 獲取陣列并保存到 this.items 的正確形式
this.items = response.data.results
我鼓勵你在api呼叫之后總是console.log(response)，并根據api結果的結構訪問資料
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/324324.html