한 개발자의 노트패드

vue의 가장 큰 특징 중 하나인 양방향 데이터 바인딩에서 주로 사용되는 기능 중 하나가 v-model 입니다. (아주)지난 포스팅에서 v-model의 대략적인 사용법에 대해 글을 적은 적이 있습니다. 개인적으로 vue의 가장 강력한 장점 중 하나라 생각하는데 최근에 나온 vue 3.4에서 이걸 더욱 편리하게 해주는 defineModel이 등장했습니다. 뭔 차이야...? 생각 할 수 있는데 좀 더 봅시다. InputField.vue App.vue 입력된 값: {{ text }} 코드를 작성하다 보면 공통 컴포넌트를 만들고 부모가 상태값을 제어하는 경우가 많습니다. vue에선 v-model을 통해 양방향 데이터 바인딩으로 값을 구현하죠. 부모에서 컴포넌트에 v-model에 ..

제목은 거창하게 써놨지만 별 건 아닙니다. 부모에 v-model로 연결된 값을 자식이 바꾸고자 할때 사용할 수 있는 방법입니다. 이야기만 들으면 간단하죠. 스토어를 사용하면 됩니다. pinia를 통해 store를 만들고 store에 값을 넣으면 되죠. 저 역시도 그렇게 생각했었고, 실무에서 그렇게 사용할려고 했습니다. 하지만. 만약 배열 안에 있는 객체의 값만을 바꿀려면 어떻게 해야 할까요? items: [ { uuid: '1', keyword: '탭 1', title: '', content: '', thumbnail: '', }, { uuid: '2', keyword: '탭 2', title: '', content: '', thumbnail: '', }, { uuid: '3', keyword: '탭 3..