Front-End

[Vue warn]: Invalid prop: type check failed for prop “value”. Expected Array, got Object 해결방법

떠돌이개발자May 25, 2023

[Vue warn]: Invalid prop: type check failed for prop “value”. Expected Array, got Object [Vue warn]: Error in callback for watcher “value”: “TypeError: value.reduce is not a function” 주의가 떴다. JSON 타입의 객체 데이터를 배열로 선언한 값으로 지정하려고 할 때 발생되었다. [오류 원인] 데이터를 받는 변수를 배열로 선언했지만 그 변수의 value값으로 object(객체)를...

Front-End

[Vue.js + Vuetify.js] v-date-picker 검색기간 설정시 이전일자(과거날짜)는 선택하지 못하도록 구현하는 방법

떠돌이개발자May 17, 2023

조회기간을 설정할때 시작일 보다 종료일이 작은 과거날짜는 선택할 수 없도록 해줘야하는 경우가 있다. 혹은 현재일자보다 과거 날짜는 선택할 수 없도록 처리해주어야 할 경우에 대한 처리...

Front-End

[Vue.js +Vuetify.js] v-carousel를 사용한 이미지 스와이프(swipe)구현하기(프리젠테이션)

떠돌이개발자Apr 15, 2023

이미지 슬라이드를 구현하기 위해 vuetify.js 프레임워크의 Carousels를 사용해보기로 하였다. 기본적인 개발가이드와 구현방법은 아래링크를 참고하면 된다. Carousel component The carousel component is used to cycle...

Front-End

[Vue.js] Redirected when going from “A url” to “B url” via a navigation guard. 오류 해결방법

떠돌이개발자Apr 6, 2023

메인화면이 A라고 가정했을 때 메인화면에서 B 페이지로 페이지 라우터 push()이용한 화면 전환시 발생한 오류이다. 실행된 스크립트는 다음과 같다. this.$router.push('/editUser'); [오류 내용] vue-router.esm.js?8c4f:2065 Uncaught (in...

Front-End

[Vue.js +Vuetify.js] v-date-picker 달력 아이콘 위치 변경 방법

떠돌이개발자Mar 30, 2023

v-date-picker 태그를 사용하면 기본적으로 달력 아이콘이 왼쪽에 기본으로 정렬되어있다. <label class="pt-2">유효기간</label> <v-menu v-model="flag.isDatePicker" :close-on-content-click="true" :nudge-right="40" transition="scale-transition" offset-y min-width="290px"> <template v-slot:activator="{ on, attrs }"> <v-text-field hide-details="auto"...

Front-End

[Vue.js + Vuetify.js] v-file-input 예제 코드 ( multiple 포함)

떠돌이개발자Mar 24, 2023

<v-file-input> html 태그 선언 <v-file-input v-model="docfile" :accept="fileAccept" color="primary accent-4" counter label="File input" :multiple="false" placeholder="파일 찾기" prepend-icon="mdi-paperclip" outlined :show-size="1000" > v-model 바인딩용 변수 null로 초기...

Front-End

[Vue.js + Vuetify.js] v-treeview 자식노드를 동적으로 disabled 처리하는 방법????

떠돌이개발자Mar 23, 2023

부모노드를 선택했을 때 자식 노드를 선택하지 못하도록 Disable 처리하고, 반대로 부모노드 선택을 해제했을 때 자식노드를 다시 선택할 수 있도록 기능 구현을 하고 있다. 사실 이런...

Front-End

[Vue.js + Vuetify.js] v-data-table 그리드에 모든 Row를 뿌리는 방법(기본 페이징 처리 없애는 방법)

떠돌이개발자Mar 22, 2023

<v-data-table> 태그를 사용하여 그리드를 생성 후 데이터를 조회하면 아래와 같이 페이징 처리가 되어있다. <v-data-table height="100px" ref="itemTable" v-model="tables.item.selectedRow" :headers="tables.item.headers" :items="data.List" @click:row="clickRow" item-key="keyId" single-select disable-sort class="elevation-1" >...

Front-End