Front-end/Vue.js

Vue) Property " " was accessed during render but is not defined on instance. 오류 원인 및 해결

luana_eun 2024. 2. 23. 16:19
728x90

부모 컴포넌트에서 자식에게 props를 전달했는데

 

콘솔창에 아래와 같은 오류가 뜨면서 파라미터에 undefinded 가 떴다. 

 

Property " " was accessed during render but is not defined on instance

 

 

원인은 넘길때 파라미터 타입을 지정해주지 않아서였다. 

 

S라는 문자열을 넘기고 싶었는데 변수도 아니면서 그냥 쌩으로 적어버린거...

 

알고보니 멍청한 내 실수였다..ㅋㅋ  S를 문자열로 인식하게끔 ' ' 따옴표를 넣어주었다.  ㅎ...

 

// 오류 코드
<TestComponent :type="S" @setDate="setDate"/>

// 수정 코드
<TestComponent :type="'S'" @setDate="setDate"/>

 

 

변수를 넣었는데도 해당오류가 뜬다면 부모 컴포넌트에서 해당 변수에 값이 잘 들어있는지 확인하고, 

 

자식 컴포넌트에서도 잘 받아왔는지 확인해보자.

 

// 자식 컴포넌트
export default {
  props : ['type']
}
728x90