input 입력값에 따라 버튼 속성에 disabled 추가하기 input 입력 창에 특정 글자를 입력했을 때, 아래 쪽에 있는 버튼 속성이 disabled="true"에서 disabled="false" 가 되도록 하였다. 원래는 뷰에서 자랑하는 양방향 데이터 바인딩($emit 또한 양방향 데이터 바인딩이다) v-model을 사용하여 input 태그에 v-model을 적어서 input에 어떤 내용이 들어왔는지 감시했다. 하지만, v-model 같은 경우에 한글은 한글자를 더 입력하거나 입력 후 input 입력창을 클릭해야지만 버튼 속성이 disabled="false" 가 되었다. 따라서 v-model 대신 v-on 을 적고 methods 대신 computed 에 함수를 적어서 v-on에 연결해주었다. 그랬더니 특정 글자를 입력하자마자 따로 마우스를 클릭하지 않아도 버.. 컴포넌트 구조 변경 vue의 SSR 프레임워크인 Nuxt.js로 회사 프로젝트를 하면서 컴포넌트의 구조를 바꾸었다. 원래 어떤 페이지 안에 예를 들어 Table과 Modal이라는 하위 컴포넌트가 있는데, Table이라는 컴포넌트 안에 있는 버튼을 눌러서 Modal이라는 컴포넌트를 열고 닫고 하였다. (리액트에서는 상태관리로 모달창의 상태를 관리하였는데, 뷰에서는 emit이라는 것을 사용해서 하위 컴포넌트에서 부모컴포넌트로 신호를 보내서 부모컴포넌트의 상태값을 변경시킬 수 있는 방법이 있다.) 그렇게 하다보니 버튼과 Modal이 한 파일에 없어서 코드를 파악하기 어렵다는 문제가 있었다. 그래서 page에서는 Table만 남기고 Modal을 Table 컴포넌트로 옮겼다. 그랬더니 코드를 파악하기 더 쉬워졌다. 이전 1 다음
