본문 바로가기

개발중/Vue.js

 (52)
[ vue ] Date Picker 날짜 차이 날 때 고정 Date Picker 을 사용하면서 발생한 수정 사항은 시작날과 마지막 날이 차이가 한 달 이상일 경우에 달력이 움직이지 않고 고정 값이었으면 좋겠다. som 언니가 보내준 자료 datePickerOptions: { disabledDate (date) { const now = new Date() return date > now || date < new Date('2016-12-31') } } :picker-options="datePickerOptions" disable 시킬 때 사용하면 좋을 것 같다. 내 상황에는 맞지않아서 실패. jQuery 로 다시 접근 하는 법을 찾아보았는데 나랑 같지 않은 상황이다. 참고 사이트 vue 의 date picker 도 찾아 보았다. 참고 사이트 vuetify 는 역시..
Vue computed 프로퍼티 처리 하는 방법. 🔘 Vue computed 프로퍼티 처리 하는 방법 Vue computed 프로퍼티 처리 하는 방법은 data 처리 하는 방법과 다르다. addDisabled computed 를 예로 든다. vue 는 addDisabled에 대해 지연 와처 ( lazy watcher )를 생성하고 이 와처를 평범한 자바스크립트 객체로 구현된 일종의 map 인 vm._computedWatchers 에 넣는다. 프로퍼티의 이름인 addDisabled 는 키 ( key ) 가 되고 와처 객체는 값 ( value ) 이 된다. 이 와처를 computed 와처라고 부른다. 렌더 함수가 호출할 때만 addDisabled 프로퍼티를 평가하기 때문에 지연 ( Lazy ) 평가이다. 내부적으로 Vue 는 평가 후에 이 값을 와처의 값 ..
vue prop 객체 감지 안되는 경우 vue 로 개발하는 와중에 부모 컴포넌트가 자식 컴포넌트에게 배열을 보내주는 상황에서 배열 안의 값이 하나가 변경될 경우 감지를 못하는 상황이 있었다. 이러한 경우 때문에 속앓이를 좀 했는데, 답을 찾았다. data : { messages : [] , newMessage : ' ' } , computed : { addDisabled() { ... } } Vue 가 인스턴스를 초기화 할 때 실제 데이터를 저장하기 위해 Vue 는 vm._data 를 만들고 vm.messages 와 vm.newMessages 에 대해 Object.defineProperty 로 게터와 세터를 정의해 두 프로퍼티에 접근하는 프락시를 만든다. 이렇게 해서 vm.message 에 접근하려고 하면 프락시에 의해 vm._data.mes..
el-drawe Scrollbar 설정 ::v-deep .el-drawer__body { height: 100%; box-sizing: border-box; overflow-y: auto; }
POMS Method Convention ☺❗ 🟡 fetchList 리스트 불러오는 메소드 명 fetchList 🟡 handleDelete 삭제 처리 메소드 명 handleDelete 🟡 sortChange Table 정렬시 호출하는 메서드는 sortChange 더보기 @sort-change = "sortChange" /** ORDER BY SETTING **/ , sortChange( row ){ this.param.page = 1 this.param.orderBy = '' this.param.orderByField = row.order === null ? '' : row.prop; this.param.orderByValue = row.order === 'ascending' ? 'ASC' : row.order === 'descending' ? 'D..
Common Search Box Convention 🟡 검색 박스 컴포넌트명은 searchBox 로 통일 ~! import searchBox from '@/views/common/search/search12 🟡 검색 버튼 클릭시 실행하는 메소드 명은 searchClick로 통일 ~! 🟡 검색 버튼 눌렀을 시에 메소드에 검색 박스에 존재하는 값들이 잘 넘어오게 해주기 ~! , searchClick( val ){ console.log(val) } 🟡 변수명 뒤에 붙는 1, 2, 3 은 모두 통일 되야 안 헷갈려요~! title1 : '품사' , labelList1 : [ { label: '전체', value: '' } , { label: '명사', value: '100000000X' } , { label: '동사', value: '100100000X' } ,..
vue popup 정리 insert popoup HI INSERT POPUP update popoup HI UPDATE POPUP
vue 유효성 span 알림 검사 Incorrect Phone Number Correct Phone Number

티스토리툴바