[Vue.js + Vuetify.js] Jodit 에디터 파일 업로드 기능 구현시 함수 또는 스크립트(method) 호출시 is not a function 오류가 발생할 때 처리하는 방법
Jodit 에디터 사용시 서버로 파일 업로드 기능을 사용하려면 별도의 추가 작업을 해야한다. 파일 업로드시 formdata 형식으로 서버로 전달담으로 vue에서 파일업로드시 axios에서 formdata를 파라미터로 사용하는 것과...
[Vue.js + Vuetify.js] 1개 이상의 트리(v-treeview)에서 부모 노드와 자식노드의 중복 체크 하는 방법
다음과 같은 선택가능한 treeview가 여러개 있다고 가정하자. Selection type은 leaf이다. 아래와 같이 1번의 트리의 경우 부모노드인 Applications 를 선택하였고, 2번의 경우 Applications의 자식노드인 Chrome:app 노드를...
[Vue warn]: Invalid prop: type check failed for prop “value”. Expected Array, got Object 해결방법
[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(객체)를...
[Vue.js + Vuetify.js] v-date-picker 검색기간 설정시 이전일자(과거날짜)는 선택하지 못하도록 구현하는 방법
조회기간을 설정할때 시작일 보다 종료일이 작은 과거날짜는 선택할 수 없도록 해줘야하는 경우가 있다. 혹은 현재일자보다 과거 날짜는 선택할 수 없도록 처리해주어야 할 경우에 대한 처리...
[Vue.js +Vuetify.js] v-carousel를 사용한 이미지 스와이프(swipe)구현하기(프리젠테이션)
이미지 슬라이드를 구현하기 위해 vuetify.js 프레임워크의 Carousels를 사용해보기로 하였다. 기본적인 개발가이드와 구현방법은 아래링크를 참고하면 된다. Carousel component The carousel component is used to cycle...
[Vue.js] Redirected when going from “A url” to “B url” via a navigation guard. 오류 해결방법
메인화면이 A라고 가정했을 때 메인화면에서 B 페이지로 페이지 라우터 push()이용한 화면 전환시 발생한 오류이다. 실행된 스크립트는 다음과 같다. this.$router.push('/editUser'); [오류 내용] vue-router.esm.js?8c4f:2065 Uncaught (in...
[Vue.js +Vuetify.js] v-date-picker 달력 아이콘 위치 변경 방법
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"...
[Vue.js + Vuetify.js] v-file-input 예제 코드 ( multiple 포함)
<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로 초기...
[Vue.js + Vuetify.js] v-treeview 자식노드를 동적으로 disabled 처리하는 방법????
부모노드를 선택했을 때 자식 노드를 선택하지 못하도록 Disable 처리하고, 반대로 부모노드 선택을 해제했을 때 자식노드를 다시 선택할 수 있도록 기능 구현을 하고 있다. 사실 이런...
[Vue.js + Vuetify.js] v-data-table 그리드에 모든 Row를 뿌리는 방법(기본 페이징 처리 없애는 방법)
<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" >...
