본문 바로가기

Vue.js46

[Vue] 조건부 렌더링 에러

consoleObservable.js?3605:26 TypeError: Cannot read properties of undefined (reading '_transitionClasses') at Array.updateClass (vue.runtime.esm.js?2b0e:7377:1) at patchVnode (vue.runtime.esm.js?2b0e:6887:1) at updateChildren (vue.runtime.esm.js?2b0e:6768:1) at patchVnode (vue.runtime.esm.js?2b0e:6894:1) at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:7062:1) at Vue._update (vue.ru.. 2023. 3. 14.

[Vue] textarea에 개행마다, 높이 늘어나고, shift+enter 개행이고, enter하면 서브밋하는 코드

export default { name: 'ResizableTextarea', props: { value: { type: String, default: '', }, }, methods: { updateValue(event) { if (event.shiftKey) return; if (event.keyCode === 13) { this.$emit('enter'); event.preventDefault(); setTimeout(() => { this.resize(); }); return; } this.resize();.. 2023. 2. 19.

[Vuejs] Vuex store 메서드 스타일 액세스

getters에 메서드에 파라미터를 주는 방법 getters: { // ... getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } } 컴포넌트에서의 사용 store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } 다만, 메서드를 통해 액세스되는 게터는 호출할 때마다 실행되며 결과는 캐시되지 않는다고 한다. 참고: https://vuex.vuejs.org/guide/getters.html#property-style-access 2022. 12. 13.

[Vue]test-utils $route 목킹 제대로 하는 방법

에러 console.error [vue-test-utils]: could not overwrite property $route, this is usually caused by a plugin that has added the property as a read-only value 사용 코드 컴포넌트이름.test.js import { shallowMount, createLocalVue } from "@vue/test-utils"; import VueRouter from "vue-router"; const localVue = createLocalVue(); const router = new VueRouter(); if (!process || process.env.NODE_ENV !== "test") { loc.. 2022. 11. 27.

[Vue] test-utils TypeError: Cannot read property 'parentNode' of undefined

에러 TypeError: Cannot read property 'parentNode' of undefined 왜 뜰까? 채널톡 sdk 추가하고부터 에러가 발생함. 에러 코드도 위에는 안 적었지만, 채널톡 js파일에서 나고 있었다. 해결방법은 옵셔널 처리함. 2022. 11. 27.

[Vue] textarea 스크롤말고 높이가 늘어나게 처리하기

개요 textarea에서 높이는 그대로인채로 스크롤이 길어지게 경험을 제공했는데, 불친절한 경험을 줄 수 있다는 피드백을 받았다. 그래서, 글자가 길어져서 줄바꿈이 일어났을 때, 스크롤 높이를 감지해서 그만큼 높이가 길어지게 구현했다. vue 파일 사이즈를 조절하는 함수를 실행시키는 트리거는 @keydown이나 @keyup보다 @input이 더 자연스러웠다. @input을 쓰자 2022. 11. 26.

[Vue]test utils에서 props 변경하는 방법

개요 에러를 일으킨 코드 test('테스트', () => { wrapper.vm.currentPage = 3; }) 에러 콘솔 메시지 console.error [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "currentPage" 다음처럼 currentPage가 propsData인데, currentPage를 바꿨거든요. 그랬더니 다음처럼 에러가 발생합니다. 해결방법 setProps를.. 2022. 11. 25.

[Vue] input type=number 엘리먼트에서 스크롤로 값 변경 막기

개요 스크롤로 값이 변경되는 현상을 발견하였다. 해결방법 귀한거디.... scroll 휠 2022. 11. 21.

[Vue] 동일 라우터 중복 요청 에러 해결방법

consoleObservable.ts:34 NavigationDuplicated: Avoided redundant navigation to current location: "/login". 해결방법 로그인 2022. 10. 31.

[VTU] jest.spyOn의 뜻을 알았다.

vue2를 사용하고 있다. Vue test utils로 테스트를 짜고있다. 테스트할 컴포넌트의 데이터 프로퍼티를 변경하면, watch에 의해서 감지되서 특정 메서드를 실행하게 되어있다. 특정 메서드는 컴포넌트 내부에 무언가를 수정하지 않고, vuex의 mutations 메서드를 호출해서 값을 변경하는 역할만 한다. 그래서, 결과가 아닌 메서드 호출만을 테스트하려고 하고 있다. 다음처럼 테스트 코드를 작성했는데, 에러가 발생했다. expect(wrapper.vm.테스트하는컴포넌트에정의된메서드).toBeCalledTimes(1); toBeCalledTImes의 received는 mock 또는 spy 함수여야고 에러 메시지가 표시되었다. 해결방법 jest.spyOn은 실제 함수를 모의함수(mock)으로 변환하.. 2022. 10. 26.

티스토리툴바