본문 바로가기

Vue.js

(3)

[Vue] Multiple v-model 수정자(modifiers) 처리하기(옵션 사용하기) Vue 공식 가이드 문서에서 v-model의 수정자 처리, 다중(multiple) v-model 사용법에 대해서 나와있다. 하나의 v-model 수정자를 이용해 set, get과 같은 옵션을 사용하는법이 소개 되지만, 다중 v-model의 사용했을 때, 수정자를 받는 받식만 소개되고 set과 같은 옵션을 사용할 수 있는 방법이 빠져있어 추가 해본다. composition 스타일 지향해서 composition 방식으로만 소개 합니다. 🤖 예제 코드 ::: 공식 가이드 playground 예제를 활용 App.vue first: second: MyComponent.vue 위 코드는 2개의 input과 v-model을 갖는 Mycomponent.vue를 App.vue에서 import 해서 사용..

[Vue3] TypeError: Cannot read properties of undefined (reading '$store') 해결 Vue3 TypeError: Cannot read properties of undefined (reading '$store') 해결하기 Vuex의 store 사용할 때 자주 볼 수 있는 오류 입니다. vue2와 vue3의 store의 사용법이 달라서 일어날 수 있는 오류 입니다. 1. main.js 확인 vue2에서 vue3를 오면서 main.js에 store를 사용하고하는 명시법이 바뀌었기에 많이 나는 오류 입니다. 해결법 import { createApp } from 'vue' import App from './App.vue' import { store } from './store/store' createApp(App) .use(store) .mount('#app') main.js store.js를 ..

[Vue .js] Composition API : props, emits 사용법 composition API porps, emits 사용법 Vue에 추가된 composition API는 Vue2에서의 option API보다 컴포넌트를 조금 더 독립적으로 만들기 유리하다.관심사의 분리(상위 컴포넌트는 데이터 컨테이너 역할로 데이터를 직접 조작, 하위 컴포넌트는 데이터를 조작하지 않고 표현만을 담당)를 통해 컴포넌트의 재사용률을 높일 수 있다.props와 emits 사용법 예시아래예시는 App.vue 안에서 TodoList.vue 컴포넌트를 사용하는 것이다. App.vue 상위 컴포넌트인 App.vue에서 하위 컴포넌트에게 datadls props를 내려주고 하위 컴포넌트에게 이벤트인 emits을 받는다. 하위컴포넌트(TodoList.vue)의 todoItemsPro..

이전 1 다음

728x90

티스토리툴바