본문 바로가기

v-model2

[Vue.js] v-model 양방향 바인딩 문제 (feat. input event) v-model 양방향 바인딩 Vue.js의 경우에는 v-model을 통해 양방향 바인딩을 제공한다고 알고 있었다. Vue.js를 학습하며 토이 프로젝트를 진행 중, 영어의 경우에는 문제없이 입력값이 전부 잘 저장되지만, 한국어의 경우에는 계속 마지막 입력이 잘려 저장되는 문제를 발견하게 되었다. 처음에는 데이터를 상위 컴포넌트에서 관리하고 하위 컴포넌트에서 input을 받아 v-model로 데이터를 상위로 올려주었는데, 이 event를 호출하는 과정에서 문제가 생긴 줄 알고 하나로 합쳐도 봤다가, 로그만 찍어봤다가 해봤는데도 문제가 생겨 골머리를 앓고 있었다😂😂 해결 방법 당연히 v-model의 문제라고 생각 안 하고 문제점들을 찾다가, 혹시나 해서 찾아보게 됐는데... 공식 문서에서 다음과 같은 안내를.. 2023. 6. 1.
[Vue.js] Vue (MVVM, Props와 Event, v-model) Vue란? Vue는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크다. 표준 HTML, CSS, JavaScript를 기반으로 구축되며, 단순한 것부터 복잡한 것까지 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반의 프로그래밍 모델을 제공한다. 선언적 렌더링과 반응성 Vue에는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태를 기반으로 선언적 렌더링을 할 수 있으며, JavaScript 상태 변경을 추적하고, DOM 요소에 연결되어 변경이 발생하면 DOM을 효율적으로 자동 업데이트 하는 반응성이라는 두 가지 핵심 기능이 있다. 이를 바탕으로 Vue는 접근하기 쉽고(Approachable), 변하기 쉬우며(Versatile), 효율적이며(Performant),.. 2023. 5. 24.