![](/img/trans.png)
[英]Vue.js computed property : [Vue warn]: Error in render: "TypeError: Cannot read property 'userId' of undefined"
[英]Vue.js - How can I solve [Vue warn]: Error in render: "TypeError: Cannot read property 'port' of undefined"?
我的对象看起来像这样:
{
"container_status": {
"name": "/dev-ms",
"port": {
"2233/tcp": [
{
"HostPort": "123"
}
]
}
}
}
我想显示关键HostPort
值
我尝试这样:
console.log(data.container_status.port['2233/tcp'][0].HostPort)
有用
但存在错误:
[Vue 警告]:渲染错误:“TypeError:无法读取未定义的属性‘端口’”
我的 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>
我会为如此复杂的事情使用计算,如果 data.container_status 改变,计算将更新值
computed: { HostPort() { if(!this.data.container_status) { return '', } return this.data.container_status.port['6690/tcp'][0].HostPort } }
<p class="">{{HostPort}}</p>
为了确保另一个属性不是未定义的,我将在计算的https://lodash.com/docs/4.17.15#get 中使用 lodash 的 get
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.