TypeError：嘗試在 CardView、NativeScript-Vue 中顯示 API 數據時無法讀取未定義的屬性“endpoint_link_1”

Question

NativeScript-Vue 和 JavaScript 初學者在這里。 好吧，我一般不精通重型 Javascript 編碼。 我在顯示從 CardViews 中的 API 收到的數據時遇到了一些問題。 這是我嘗試過的代碼：

<template>
<Page >
<ScrollView>
    <StackLayout padding="5" for="item in cardList">
        <CardView ripple="true" elevation="10" padding="5" margin="15" height="150">
            <StackLayout>
            <Image :src="'http://URL' + item.endpoint_link_1" stretch="aspectFit" height="120"/>
            </StackLayout>
        </CardView>

        <CardView ripple="true" elevation="10" padding="5" margin="15" height="150">
            <StackLayout>
            <VideoPlayer :src="'http://URL' + item.endpoint_link_2"  controls="true" stretch="aspectFill" autoplay="false" height="120"/>
            </StackLayout>
        </CardView>
    </StackLayout>
</ScrollView>
</Page>
</template>


<script>
import * as http from "http";

export default {
    data() {
        return {
            cardList: []
        };
    },

    mounted() {
        http.getJSON("http://URL").then(result => {
                this.cardList = result.results;
                console.log(result); #This shows the results in the log so I know it works.
                console.log(cardList); #doesn't show anything in log
            }, error => {
                console.log(error);
            });
    };
</script>

我的 JSON 數據嵌套如下：

[
    {
        "endpoint_link_1": "/default/files/image.jpg",
        "endpoint_link_2": ""
    },
    {
        "endpoint_link_1": "",
        "endpoint_link_2": "/default/files/video.mp4"
    }
]

嘗試此操作時出現的錯誤是： "TypeError: Cannot read property 'endpoint_link_1' of undefined" 。 我懷疑列表cardList沒有被填充，或者我的for="item in cardList"在錯誤的位置。 任何幫助表示贊賞。

Answer 1

在腳本中使用v-for代替for和： console.log(this.cardList); 將向您顯示數據