본문 바로가기
반응형

VueJS57

[VueJS] props use camelCase Error : Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. vueJS에서 compoent를 사용하게 되면 props라는 속성을 사용하게 되는데 누구나 한번쯤은 겪을만한 이 에러에 대해 알아보자. props를 사용할 때 아무생각 없이 camelCase를 사용하게 되면 아래와 같은 에러가 발생한다. Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. 그냥 쉽게 말해서 카멜케이스를 사용하고싶으면 케밥케이스를 사용해라 라는 의미인데 Vue 공식 홈페이지에서 다음과 같이 안내를 해주고 있다. HTML 어트리뷰트는 대소문자 구분이 없기 때문에 브라우저는 대문자를 소문자로 변경하여 .. 2020. 11. 9.
[VueJS] 배열 데이터를 가지고 component 동적으로 추가하기 vueJS에서 배열 데이터를 가지고 component 동적으로 추가하는 방법에 대해 알아보자. 사실 제목만 가지고 유추할 수 있는데, v-for를 component template에 걸어서 사용하는걸 의미한다. (다른 방식으로도 사용하는 방법이 있겠지만 본문에서는 배열 데이터를 가지고 v-for문법을 사용하여 다룬다.) 이러한 방법을 사용하는 이유가 있는데 어떤 기능을 개발하느냐에 따라 다르겠지만 배열데이터를 가지고 v-for문을 돌려서 화면에 뿌려주는데 그 하나하나가 독립적인 기능을 가지고 있다면 component를 동적으로 생성하여 작업을 해야할때 사용한다. 예제 코드를 통해 접해보자. ▷ 예제1) 동적 component 생성 목록 추가 Vue.component('it-component',{ temp.. 2020. 11. 2.
[VueJS] vue If you are using v-if on multiple elements, use v-else-if to chain them instead. error Vue component를 처음 사용하다 보면 한번쯤은 겪을 수 있는 에러인데 발생한 에러는 다음과 같다. ▷ 에러 vue If you are using v-if on multiple elements, use v-else-if to chain them instead. error 에러가 말하고자 하는것은 "여러 개의 태그를 최상위 레벨로 동시에 위치시킬 수 없다." 라는 의미라고 보면 된다. 이게 무슨 의미인가 하면 직접 예제 코드를 통해 확인해보자. ▷ 예제1) 에러발생 코드 Vue.component('modal-test',{ template: '테스트test' ,methods:{ show:function(){ this.$modal.show("test"); } } }); 이 component를 사용해 보.. 2020. 10. 31.
반응형
TOP

티스토리툴바