javascript - Vue.js - 我该如何解决 [Vue 警告] : Error in render: "TypeError: Cannot read property ' port' of undefined"?

Question

我的对象看起来像这样:

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

我想显示键 HostPort 的值

我这样尝试:

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

有效

但是存在错误:

[Vue warn]: Error in render: "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>

我该如何解决这个错误？

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