Question

我的对象看起来像这样：

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

如何解决此错误？

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>

Answer 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的获取

Vue.js-如何解决[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'port'”？

2 个答案: