Vue.js 2

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

부모 컴포넌트에서 자식에게 props를 전달했는데 콘솔창에 아래와 같은 오류가 뜨면서 파라미터에 undefinded 가 떴다. Property " " was accessed during render but is not defined on instance 원인은 넘길때 파라미터 타입을 지정해주지 않아서였다. S라는 문자열을 넘기고 싶었는데 변수도 아니면서 그냥 쌩으로 적어버린거... 알고보니 멍청한 내 실수였다..ㅋㅋ S를 문자열로 인식하게끔 ' ' 따옴표를 넣어주었다. ㅎ... // 오류 코드 // 수정 코드 변수를 넣었는데도 해당오류가 뜬다면 부모 컴포넌트에서 해당 변수에 값이 잘 들어있는지 확인하고, 자식 컴포넌트에서도 잘 받아왔는지 확인해보자. // 자식 컴포넌트 export default { pr..

Front-end/Vue.js 2024.02.23

Vue.js) 태그에 조건을 달아 조건에 따른 CSS 적용하기(Vue2, 3버전)

아래와 같이 상황에 따라 길이를 다르게 적용해야할때가 있다. C가 있다면 보여주고, 없으면 안보여주는 상태. 비율로해서 없는 부분이 채워지게 할 수 도 있겠지만, C가 있는지 없는지에 대한 조건을 달아서 width값을 다르게 적용해보자. 방법은 간단하다. "[ ]" 로 감싸고 그 안에 삼항 연산자 형식으로 입력하면된다. :style = "[countC > 0 ? 'width: 33.3%' :'width: 50%']" ** 주의할 점. 여기서는 css와는 다르게 카멜표기법이 아닌, 스네이크형식으로 입력해야한다. ex) backgroundColor (X), background-color (O) Vue 2 버전 방식 문법이 조금 다르니 참고하기! :style = "[countC > 0 ? {'width': '..

Front-end/Vue.js 2023.01.04
반응형