title: Vue.js - How can I solve [Vue warn]: Error in render: "TypeError: Cannot read property 'port' of undefined"?
body: <p>My object looks like this :</p>
  
  <pre><code>{
      "container_status": {
          "name": "/dev-ms",
          "port": {
              "2233/tcp": [
                  {
                      "HostPort": "123"
                  }
              ]
          }
      }
  }
  </code></pre>
  
  <p>I want to display value of key <code>HostPort</code></p>
  
  <p>I try like this :</p>
  
  <pre><code>console.log(data.container_status.port['2233/tcp'][0].HostPort)
  </code></pre>
  
  <p>It works</p>
  
  <p>But There exist error :</p>
  
  <blockquote>
    <p>[Vue warn]: Error in render: "TypeError: Cannot read property 'port' of undefined"</p>
  </blockquote>
  
  <p>My vue component like this :</p>
  
  <pre><code>&lt;template&gt;
    ...
      &lt;v-flex xs4&gt;
        &lt;p class=""&gt;{{data.container_status.port['6690/tcp'][0].HostPort}}&lt;/p&gt;
      &lt;/v-flex&gt;
    ...
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    ...
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I solve this error?</p>