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 ๋ค์