我是VueJS的新手，遇到了以下问题：
我有一个模板，点击一个按钮，通过< code>router.push加载一个新的模板，同时发送一个ID作为数据。
模板：
<template>
<div>
{{ content.description }} // Works fine
{{ content.subobject.logo }} // Logo not found
</div>
</template>
在正在加载的新模板中，我有以下功能将接收到的ID保存到数据中：
created: function() {
this.ID = this.$route.params.data.toString()
},
然后我在方法中有一个函数，它使用这个ID通过axios/get获取数据：
methods: {
getContent: function() {
axios.get("https://api-url.com/" + this.ID)
.then((response) => {
this.content = response.data.data
console.log(response);
}).catch(error => {
console.log("ERRR:: ", error.response.data)
});
}
},
此函数在挂载中调用：
mounted: function() {
this.getContent()
}
我的数据功能:
data: function() {
return {
ID: '',
content: [] as any
}
API返回的数据如下所示:
title: "this is the title"
description: "Lorem Ipsum"
subobject: {
logo: "Logo URL"
}
当我使用 {{ content.title }} 时
有趣的是，当我打开模板并在页面加载后添加{{content. subobject.logo}}时，保存它，然后热重新加载，它显示正常？！
第一次加载时数据似乎不“可用”-但这怎么可能，如果{{content. title}}
非常感谢您的任何想法！
数据最初不可用，这意味着content仍然没有内部字段值，以避免添加条件渲染，如：
<div v-if="content.subobject">{{ content.subobject.logo }}</div>
你也可以这样做：
data: function() {
return {
ID: '',
content: null
}
}
<template>
<template v-if="content">
<div >{{ content.subobject.logo }}</div>
<div >{{ content.title }}</div>
</template>
</template>
