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

[Vue.js +Vuetify.js] v-img 태그에 src 이미지 링크 바인딩 처리 방법

떠돌이개발자Mar 17, 2023

<v-img> 태그에 이미지가 보여지도록 하는 방법에 문제가 있는것일까? 내가 잘 모르는 것일까? 오늘도 삽질중이다. 이미지를 적용했지만 보이지 않는다. assets 폴더 아래의 이미지는 다음과 같다. 아래와 같이...

Front-End

[vue.js + vuetify.js] Treeview의 open-all이 동작 하지 않을 때 처리방법??

떠돌이개발자Feb 14, 2023

treeview를 구현 중인데, 상황에 따라 open-all 열리고 어떤 경우에는 열리지 않는 문제가 발생하였다. API문서를 찾아보니 mounted 될때 open-all이 true인경우 모든 노드를 오픈한다는 것이다. 라이프싸이클 주기...

Front-End

[Vue.js + vuetify.js] 체크박스(checkbox) 여러개를 바인딩(v-model) 처리하여 사용하는 방법

떠돌이개발자Feb 11, 2023

공통으로 사용할 수 있는 체크박스(v-checkbox) 리스트형 다이얼로그를 생성하였다. <v-list> 태그를 사용하여 <v-list-item-group> 태그에 선택한 리스트의 선택한 값을 바인딩하기 위해 v-model을 지정했고 여러개 선택가능하도록 mutiple옵션을 주었다....

Front-End