코딩하는 둥둥

요구사항 swiper가 스와이핑될 때마다 swiper 외부 요소의 값도 변경되는 로직을 구현하기위해 swiper의 index값을 스와이퍼 외부에서 사용할수 있도록 해야했다. 구현 슬라이드의 인덱스를 변수에 저장해, 그 변수를 활용해 외부 요소의 값을 변경하도록 구현하려고했다. 기존에 스와이핑 될때마다 css를 변경하는 로직을 slideChange에서 구현했기때문에 마찬가지로 swiper index도 slideChange에서 realIndex를 사용해 변수로 넘겨주고자했다. 이때 activeIndex가 아니라 realIndex를 사용한 이유는 loop:true를 사용했기때문에 activeIndex가 현재 슬라이드 순서와 달랐기때문이다. activeIndex : 현재 활성 슬라이드의 인덱스 번호 ※ loop..

type: Number을 지정하고 문자열 값을 넘기면 발생하는 오류 type 지정시 부모 컴포넌트는 정적인 값일때도 v-bind를 해줘야 한다. 나의 경우 v-bind(:)가 빠져서 발생한 오류였다. References. https://negabaro.github.io/archive/vuejs-props

[vue-router] Router must be called with the new operator. Uncaught TypeError: Cannot read properties of undefined (reading 'install') vue create 프로젝트명으로 개발 환경 구현중 발생한 오류이다. 결론적으로 말하면 vue2를 사용할 경우에는 vue-router3버전을 사용해야 한다. vue2로 프로젝트를 만든 후에 npm install vue-router을 사용해 vue-router을 설치했는데, 이 과정에서 자동적으로 vue-router4버전대가 설치되었다. References. https://velog.io/@k_jihye92/Vuevue-router-cannot-read-propertie..

[Vue warn]: Property or method "test" is not defined on the instance but referenced during render. 'test'라는 속성이 선언되지 않았는데 화면에 렌더링 되려고 했습니다. data나 methods에 변수를 선언해 주지 않고 화면에 렌더링 하려고 해서 발생한 오류 methods에 변수를 선언해 주지 않아서 발생했기때문에 변수 선언 후 오류가 뜨지 않았다. References. https://joshua1988.github.io/web-development/vuejs/common-error-cases/