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에 연결해주었다.

 

그랬더니 특정 글자를 입력하자마자 따로 마우스를 클릭하지 않아도 버튼이 활성화되었다.