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);将显示您的数据