Vue.js - 如何解决 [Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性‘端口’”？答案

【问题标题】：Vue.js - How can I solve [Vue warn]: Error in render: "TypeError: Cannot read property 'port' of undefined"?Vue.js - 如何解决 [Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性‘端口’”？
【发布时间】：2019-09-07 09:40:08
【问题描述】：

我的对象看起来像这样：

{
    "container_status": {
        "name": "/dev-ms",
        "port": {
            "2233/tcp": [
                {
                    "HostPort": "123"
                }
            ]
        }
    }
}

我想显示键HostPort的值

我尝试这样：

console.log(data.container_status.port['2233/tcp'][0].HostPort)

有效

但存在错误：

[Vue 警告]：渲染错误：“TypeError: Cannot read property 'port' of undefined”

我的 vue 组件是这样的：

<template>
  ...
    <v-flex xs4>
      <p class="">{{data.container_status.port['6690/tcp'][0].HostPort}}</p>
    </v-flex>
  ...
</template>
<script>
export default {
  ...
};
</script>

我该如何解决这个错误？

【问题讨论】：

标签： javascript vue.js vuejs2 vuex vuetify.js

【解决方案1】：

我认为您的数据对象在组件加载时还没有准备好，要解决这个问题，试试这个：

 <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>

【讨论】：

【解决方案2】：

对于如此复杂的事情，我会使用计算值，如果 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

【讨论】：