[Vue.js] [Vue warn]: Property ~ was accessed during render but is not 에러 해결 방법

현상

 

Vue 강의를 보며 프로젝트를 진행하던 중 아래와 같은 에러메세지가 크롬 콘솔 창에 나타나면서 자식 컴포넌트가 화면에 나타나지 않았다.

 

[Vue warn]: Property "type" was accessed during render but is not defined on instance.

 

원인

 

부모 컴포넌트에서 type 객체를 자식 컴포넌트한테 전달해주려 하는데 자식 컴포넌트에 type이 props 내부에 선언되지 않은게 원인이었다.

 

parentComponent.vue (부모 컴포넌트)

  <childComponent
    :type="parentType"
  />

childComponent.vue (자식 컴포넌트)

<script>
export default {
    props: {

    },
    type: {     
        type: String,
        default: 'default type' 
    }
}
</script>

 

해결

 

자식 컴포넌트 props 내부에 type을 선언해준다.

 

childComponent.vue (자식 컴포넌트)

<script>
export default {
    props: {
        type: {     
            type: String,
            default: 'default type' 
        }
    }
}
</script>