nextTick데이터가 바뀌어서 재렌더링될 때, 바로 DOM 요소로 접근하려고 하면 해당 요소를 제대로 찾지 못한다.이때 nextTick을 활용하면 재렌더링이 완료된 후에 코드를 실행하도록 처리할 수 있다. // 변수 'var1'이 변경되었을 때 실행되는 코드watch(var1, (newVal, oldVal) => { nextTick(() => { // 실행할 코드 });});

이미지 에러 발생 시 기본 이미지로 표시하기 e.target.src = defaultImg" alt="슬라이드 이미지"> 'imgUrl' 변수에 저장된 경로로 이미지를 가져왔을 때 에러가 발생한다면 해당 img 태그의 src 속성을 'defaultImg' 변수에 저장된 경로로 변경하여 기본 이미지를 띄운다.

조건에 따라 class 토글하기변수의 값을 class로 지정하기......id는 v-bind:id나 :id를 사용하면 된다.  예시 1) 변수 값에 따라 클래스 지정하기 ......예시 2) foreach 문에서 특정 값에 따라 클래스 지정하기

Vue로 구현하다 보면 렌더링이 완료되기 전에 {{ }}가 보이거나, v-if나 v-show로 처리한 요소들이 보이는 경우가 있다.사내에서 확인할 때에는 크게 거슬릴 정도는 아니었는데, 속도가 좀 느린 환경에서 실행할 때에는 꽤 오래 보일 때가 있어서 해결 방법을 알아 보았다. v-cloak을 지정하기 전 v-cloak'v-cloak'은 Vue 처리가 완료되면 자동으로 삭제되는 디렉티브이다.이를 활용하여, Vue.js에서 해당 요소가 렌더링되기 전까지 요소를 브라우저에서 감출 수 있다. 1. 스타일 설정/* [ ] : 속성 선택자 *//* 'v-cloak' 속성을 가진 요소에 해당 스타일을 적용함 */[v-cloak] { /* 해당 요소를 숨김 */ display: none;} 2. 렌더링이 ..

v-showv-show를 사용하면 조건의 true/false와 관계 없이 해당 요소가 렌더링되지만,false일 경우 'display:none'으로 설정되어 숨김 처리되고, 다시 true로 변경된다면 'display:none'이 해제된다. v-ifv-if를 사용하면 조건이 true인 경우에만 해당 요소가 렌더링된다.만약 조건식의 결과가 false였다가 다시 true로 변경되면 해당 요소를 재렌더링하는 방식이다.홈페이지 →인스타그램 →  따라서, 조건식의 결과가 변경될 가능성이 있는 경우에는 v-if보다는 v-show를 사용하는 것이 좋다.