Vue.js - How can I solve [Vue warn]: Error in render: “TypeError: Cannot read property 'port' of undefined”?

Question

My object looks like this :

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

I want to display value of key HostPort

I try like this :

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

It works

But There exist error :

[Vue warn]: Error in render: "TypeError: Cannot read property 'port' of undefined"

My vue component like this :

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

How can I solve this error?

Answer 1

I think that your data object is not ready in component loading, to solve this try this :

 <p class="">{{!!data.container_status?data.container_status.port['6690/tcp'][0].HostPort:""}}</p>

or

<p class="" v-if="data.container_status">{{data.container_status.port['6690/tcp'][0].HostPort}}</p>

Answer 2

I would use a computed for something so complex, and the computed will update the value if data.container_status changes

computed: { HostPort() { if(!this.data.container_status) { return '', } return this.data.container_status.port['6690/tcp'][0].HostPort } }

<p class="">{{HostPort}}</p>

to make sure that another property is not undefined I would use the get of lodash in the computed https://lodash.com/docs/4.17.15#get