我試圖從我的 JSON 檔案中回傳“標題”，但我似乎無法獲得正確的路徑。目前'resultPacket'正在回傳資訊但是當我嘗試進入'results - metaData'時它沒有回傳任何東西。
有人可以幫忙嗎？
VueJS axios 呼叫部分
<script>
import axios from "axios";
export default {
data() {
return {
results: [],
title: "",
};
},
props: {
result: Object,
},
mounted() {
axios
.get(
"**myURL is here - I cant share**"
)
.then((response) => {
**this.results = response.data.response.resultPacket;**
})
.catch((error) => {
console.log(error);
this.errored = true;
})
.finally(() => (this.loading = false));
},
};
JSON
response": {
"resultPacket": {
"querySystemRaw": null,
"results": [
{
"rank": 1,
"score": 1000,
"metaData": {
"title": "This is the title",
uj5u.com熱心網友回復：
看起來您沒有從 API 獲得的回應中正確獲取嵌套屬性。
此外，As 結果可能包含任意數量的物件。因此，您可以使用回圈從所有結果物件中進行迭代。
作業演示：
const data = {
"response": {
"resultPacket": {
"results": [{
"rank": 1,
"score": 1000,
"metaData": {
"title": "This is the 1st title"
}
}, {
"rank": 2,
"score": 1000,
"metaData": {
"title": "This is the 2nd title"
}
}, {
"rank": 3,
"score": 1000,
"metaData": {
"title": "This is the 3rd title"
}
}]
}
}
};
new Vue({
el: '#app',
data() {
return {
results: []
}
},
mounted() {
this.results = data.response.resultPacket.results;
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item, index) in results" :key="index">
{{ item.metaData.title }}
</li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/426728.html
上一篇：單獨的Vue樣式插槽