본문 바로가기

Vue

(2)
Vue CKEditor 커서가 처음으로 이동하는 오류 CKEditor vue 버전 사용중 커서 이동 오류 오류 증상 Vue 2.x로 작성된 프론트엔드에서 CKEditor를 사용 중이다. (당연하게도) CKEditor 샘플 페이지에서 확인 시 오류가 없는데, 우리 프로젝트에서 에디터의 정렬이나 표 기능을 사용하면 커서가 내용의 맨 처음으로 이동하는 오류가 있다. 왼쪽이든 가운데든 텍스트 정렬 버튼을 눌러놓고 글자를 입력하면 입력한 글자가 내용의 맨 처음에 들어가게 된다. 해결 에디터 버전까지 바꿔보았지만 원인은 엉뚱한 데 있었다. 바로 모델 바인딩 시 .trim 수식어를 사용한 것. .trim 수식어를 이것을 지우니 거짓말처럼 해결되었다. Vue 프레임워크의 이런 기능들은 놀랍도록 편리하지만, 간혹 이렇게 컴포넌트를 사용하며 값의 변경 시점을 제어할 수 없는..
[Vue.js] 체크박스 값을 boolean(true/false) 대신 'Y/N' 으로 바꾸기 상황 Vue.js에서 체크박스에 바인딩 된 모델의 값은 기본적으로 true / false 이다. 근데 고객 놈들의 디비는 Y/N 문자로 관리한다. 해결 input의 true-value와 false-value props를 사용한다. 주의할 점은, 이 값은 form submit 시 체크되지 않은 값은 전송되지 않는다는 점이다. 나는 form submit 하지 않고 바인딩된 모델 json을 전송해서 사용하므로 상관없었다. 참고 https://kr.vuejs.org/v2/guide/forms.html#%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4-1