분류 전체보기
[vue.js] object(객체) 에 없는 데이터 변경 감지 vm.$set
서론 지난번 글 hjh0827.tistory.com/41 에서 배열(array)로 데이터 바인딩을 작성하였다. 해당 내용은 개인적 개발로 작성한것이므로 이번에는 obejct로 간단하게 데이터 바인딩에 대해 작성해보도록 하겠다. 상황 부모 컴포넌트 + 자식 컴포넌트 부모 컴포넌트에서 data로 선언된 obejct를 자식 컴포넌트로 prop 부모 컴포넌트에서 obejct 데이터 바인딩 시 자식 컴포넌트 변경 확인 vue.js에서 가장 중요한 데이터 바인딩 처리를 하기 위해 위의 상황을 생성하였다. 해당 구조는 vue.js에서 흔하게 볼수 있는 구조이다. 보통 부모 컴포넌트에서 선언한 데이터가 변경시 해당 데이터를 상속받는 자식 컴포넌트는 해당 데이터를 바인딩 해야한다. case 1. vm.items,.ind..
vue.js - v-model 배열(array)로 데이터 바인딩 하기
서론 이번 프로젝트 하면서 가장 짜증났던 요건이 있다. 1. select box 데이터를 다중 선택해야 하는 상황일때 multi select box가 아닌 select box를 다중으로 노출. ex) 3가지의 select 데이터 중 2개를 선택해야 한다면 2개의 select box를 생성하고 각각 1개씩 선택 2. 첫번째 select box에서 데이터를 선택했다면 두번째 select box는 선택 불가. 라는 vue.js 하면서 만났던 방식 중 가장 짜증나는 방식이었다. 개발 1. select box 데이터를 다중 선택해야 하는 상황일때 multi select box가 아닌 select box를 다중으로 노출. > 다중 선택해야 하는 개수만큼 select box를 v-for 처리. option 영역은 s..
computed - 종속 data 캐싱으로 button disabled validation 제어
서론 지난번 글 hjh0827.tistory.com/24에서 button 클릭시 제어를 data 빈값 체크로 페이지 이동을 처리하였다. goNextPage () { if (this.signup.id == null || this.signup.password == null || this.signup.pwhint === '' || this.signup.pwhintans == null || this.passwordCheck == null) { alert('필수값 누락') return } if (!this.idValid || !this.passwordValidFlag || !this.passwordCheckFlag) { alert('유효성 확인') return } this.$router.push({ name: '..