我的对象看起来像这样:
{
"container_status": {
"name": "/dev-ms",
"port": {
"2233/tcp": [
{
"HostPort": "123"
}
]
}
}
}
我想显示键
HostPort
的值我这样尝试:
console.log(data.container_status.port['2233/tcp'][0].HostPort)
有用
但是存在错误:
[Vue警告]:渲染错误:“ TypeError:无法读取未定义的属性'port'”
我的Vue组件是这样的:
<template>
...
<v-flex xs4>
<p class="">{{data.container_status.port['6690/tcp'][0].HostPort}}</p>
</v-flex>
...
</template>
<script>
export default {
...
};
</script>
我该如何解决这个错误?
最佳答案
我认为您的数据对象尚未在组件加载中准备好,要解决此问题,请尝试以下操作:
<p class="">{{!!data.container_status?data.container_status.port['6690/tcp'][0].HostPort:""}}</p>
要么
<p class="" v-if="data.container_status">{{data.container_status.port['6690/tcp'][0].HostPort}}</p>