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

[자바스크립트] JSON 데이터를 담고 있는 배열의 객체를 삭제하는 방법

떠돌이개발자Feb 11, 2023

서버로 부터 받아온 JSON타입의 문자열을 배열(array)에 담고 삭제하기 위해 기존에 알고 있던 splice()메서드를 사용하여 처리하였다. 서버로 부터 받아온 데이터를 화면에 table 태그를 사용하여 표현하였다. 구현된...

Front-End

[Vue.js] 커스텀 컴포넌트(custom component) 구현시 부모와 자식 컴포넌트 사이에 데이터 동기화(sync) 하는 방법

떠돌이개발자Jan 28, 2023

자식 컴포넌트에서 데이터를 가공해야한다면? 트리뷰를 예로 들어본다. 트리뷰를 바닥페이지에서 공통으로 사용할 수도 있고, 팝업창 혹은 다이얼로그창에서도 사용할 수 있음으로 공통으로 사용할 수 있도록 컴포넌트로 만들었다. 부모 컴포넌트 뷰는...

Front-End

[Vuetify.js] 서버에서 불러온 데이터로 Treeview 노드 items Array 데이터 생성 방법

떠돌이개발자Jan 27, 2023

신규프로젝트에서 트리뷰 작업을 해야하는 상황에 놓였다. 그리고 어제 vuetify.js 의 트리뷰 컴포넌트에 대한 기술검토를 하였다. 그리고 오후 부터 트리노드 생성을 위해 데이터베이스로부터 불러온 트리용 쿼리...

Front-End

[Vuetify.js] treeview 사용법 정리

떠돌이개발자Jan 26, 2023

vuetify.js 라이브러리의 treeview를 사용하는 방법에 대한 정리입니다. v-treeview API는 아래 링크를 참고하면 되고, Props, Functions, Events 등의 정보를 확인할 수 있습니다. ...

Front-End

[Vue.js] 단일 컴포넌트를 import 후 템플릿에 호출하는 방법(컴포넌트 뷰에 파라미터 값 전달 하는 방법)

떠돌이개발자Jan 17, 2023

검색된 리스트에서 다음과 같은 방법으로 이동할 페이지를 호출한다. moveNext(row) { this.$router.push({ name: 'userDetail', params: { userId: row.USER_ID } }); }, UserDetail.vue 내용은 다음과 같다. <template>...

Front-End