[Vue] regex를 적용한 TextInput에서 값 업데이트가 제대로 되지 않는 현상

0. 서론

반나절동안 저를 괴롭힌 부분이었습니다.

커스텀 텍스트인풋 컴포넌트를 만들었는데 도무지 값 업데이트가 되지 않는것이었죠.

이모지를 regex로 거르고 input 리스너를 통해 emit을 하는데, 분명 값은 제대로 깔끔한 텍스트가 넘어오는 반면,

보이는 부분의 값은 변하지 않는겁니다...

---

1. 원인

아주 당연한 원인이었습니다.

입력 : 1234덜덜
입력 : 1234덜덜😀 -> regex -> 1234덜덜

아시겠나요? 바로 실제 값이 변하지 않아서 렌더링을 하지 않았던 겁니다.

너무 충격적인 이유로 고민했네요.

 

2.해결법

간단하게

vm.$forceUpdate();

한줄 추가해주시면 됩니다.