본문 바로가기

Vue3

[vue.js] v-for 출력 안 되는 오류 아.. 정말 삽질을 얼마나 했는지 모르겠다. 아래 코드 실행시 계속해서 Members의 값을 읽어오지 못했고, 도대체 이건 왜 안될까 약 한시간 넘게 삽질한것 같다. {{ member.role }} 콘솔에서는 warn 메시지와 오류 메시지까지 뿜어내며 뭔가가 잘못되고 있다고 알려주었다. 분명히 {{Members}}를 해보면 안에 값들을 잘 읽어오는데 말이다. Property "idx" was accessed during render but is not defined on instance. 결국 문제는 콜론 : colon 문제였다. ":"는 v-bind가 앞에 생략되어있다고 생각하면 된다. 가령 v-bind:class="", v-bind:src 등.... v-for에 콜론을 붙이니 정상적으로 동작할리 없었.. 2022. 11. 5.

[vue] $emit 이벤트 발생과 수신 (하위에서 상위 컴포넌트로 이벤트 전달) event emit : 이벤트를 발생(emit)시켜 상위 컴포넌트에 신호를 보낸면 된다. 상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출하는 것. 이벤트 발생과 수신 형식 $emit()과 v-on: 속성을 사용하여 구현 $emit()을 호출하는 위치는 하위 컴포넌트의 특정 메서드 내부 //이벤트 발생 this.$emit('이벤트명'); //this는 하위 컴포넌트를 가리킴 호출한 이벤트는 하위 컴포넌트를 등록하는 태그(상위 컴포넌트의 template 속성에 위치)에서 v-on:으로 받음. //이벤트 수신 2021. 9. 19.

[vue] directives 뷰 주요 디렉티브 정리 뷰 디렉티브란? html 태그안의 v-접두사를 가지는 모든 속성을 의미함. 화면의 요소를 직접 제어할 필요 없이 뷰의 디렉티브를 활용하여 화면 요소들을 조작할 수 있음. directive name role 비고 v-if 지정한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 html 태그를 화면에 표시하거나표시하지 않는다. v-for 지정한 뷰 데이터의 개수만큼 해당 html 태그를 반복 출력함 v-show v-if와 유사하게 데이터의 진위 여부에 따라 해당html태그를 화면에 표시하거나 표시하지 않는다. v-if는 해당 태그를 완전히 삭제하지만 v-show는 css효과만 display:none;으로 주어 실제 태그는 남아 있고 화면 상으로만 보이지 않는다. v-bind html 태그의 기본 속성과 뷰 데이.. 2021. 9. 19.

이전 1 다음

티스토리툴바