Vue.js 在方法中调用API并获取[object Promise]

我在静态站点模式下使用Nuxt.js，并尝试使用道具中传递的字符串从API获取图像，然而，在模板中我得到了

[object Promise]

。我本以为在get请求之前

return

会解决承诺问题，但我认为我对承诺和Nuxt.js的理解有点偏离了。任何帮助都将不胜感激

<template>
    <div>
        {{ getThumbnailSrc() }}
    </div>
</template>

<script>
import axios from 'axios'

export default {
    props: {
        link: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            imageUrl: null
        }
    },
    methods: {
        getVimeoId(link) {
            return link.split('/').pop()
        },
        getThumbnailSrc() {
            return axios
                .get(
                    `https://vimeo.com/api/v2/video/${this.getVimeoId(
                        this.link
                    )}.json`
                )
                .then(response => {
                    const vimeoThumbnailUrl = response.data[0].thumbnail_large
                    console.log(vimeoThumbnailUrl)
                    return {
                        vimeoThumbnailUrl
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        }
    }
}
</script>

{{getThumbnailSrc（）}}
从“axios”导入axios
导出默认值{
道具：{
链接：{
类型：字符串，
必填项：true
}
},
数据（）{
返回{
imageUrl:null
}
},
方法：{
getVimeoId（链接）{
返回link.split（'/'）.pop（）
},
getThumbnailSrc（）{
返回轴
.得到(
`https://vimeo.com/api/v2/video/${this.getVimeoId(
这个链接
)}.json`
)
。然后（响应=>{
const vimeotumbnailurl=response.data[0]。缩略图\u大
console.log（vimeoThumbnailUrl）
返回{
vimeoThumbnailUrl
}
})
.catch（错误=>{
console.log（错误）
})
}
}
}

当然不会！XHR请求是异步的，因此模板不知道它需要等待

通过在组件上使用附加的数据属性来解决此问题，并改为使用该属性：

data() {
    return {
        imageUrl: null,
        thumbnailSrc: null
    }
},

在您的回拨中：

.then(response => {
    const vimeoThumbnailUrl = response.data[0].thumbnail_large
    console.log(vimeoThumbnailUrl)
    this.thumbnailSrc = vimeoThumbnailUrl
})

现在您可以使用

{{thumbnailSrc}}

，它将被适当地加载