Vue.js - [Vue warn]을(를) 어떻게 해결해야 하는가:렌더 오류: "TypeError: 정의되지 않은 속성 '포트'를 읽을 수 없음"?

Vue.js - [Vue warn]을(를) 어떻게 해결해야 하는가:렌더 오류: "TypeError: 정의되지 않은 속성 '포트'를 읽을 수 없음"?

내 물체는 다음과 같다:

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

키 값을 표시하려는 경우HostPort

나는 이렇게 노력한다.

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

그건 효과가 있다.

그러나 오류가 있음:

[부유 경고]:렌더 오류: "TypeError: 정의되지 않은 속성 '포트'를 읽을 수 없음"

다음과 같은 내 vue 구성 요소:

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

어떻게 하면 이 오류를 해결할 수 있을까?

구성 요소를 로드할 때 데이터 개체가 준비되지 않은 것 같은데 이 문제를 해결하려면 다음을 수행하십시오.

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

나는 매우 복잡한 것에 대해 계산된 것을 사용할 것이고, 계산된 것은 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를 사용할 것이다.

참조URL: https://stackoverflow.com/questions/57832475/vue-js-how-can-i-solve-vue-warn-error-in-render-typeerror-cannot-read-pr