logo

Vue - 숫자만 입력받아 세자리마다 콤마 찍기

language-logoVueJS

• 숫자만 입력되고 세 자리 숫자마다 콤마가 찍히는 기능을 구현하려 했으나, v-model을 이용한 방식에서는 한글 입력 시 반영이 느리고 삭제가 바로 이루어지지 않는 문제가 발생했다.
• 이는 v-model이 한글 작성 시 업데이트 문제를 가지고 있기 때문으로, 이를 해결하기 위해 :VALUE, @INPUT + WATCH 방식을 사용하기로 결정했다.
• :value에 data를 바인딩하고 @input에서 값을 넣어주는 방식을 사용하면 한글 작성 시에도 문제 없이 작동한다.
• 이를 위해 data에 onlyNumber를 선언하고, watch에서 onlyNumber를 감시하며 숫자 외의 문자를 제거하고 세 자리 숫자마다 콤마를 찍는 기능을 구현했다.

thumbnail
북마크
공유하기
신고하기
1분 분량
조회수 97
profile-image소르빔
일 년 전
Copyright © 2025. Codenary All Rights Reserved.