# vuetify 1.x -> 2.x 업그레이드 작업
# vuetify 최신버전(2.x) 및 sass 설치 : package.json 자동 변경
npm install --save vuetify@latest sass
# main.js 에서 vuetify 생성을 다음과 같이 변경
Vue.use(Vuetify);
const opts = {
icons: {
iconfont: 'md' || 'mdi'
},
theme: {
themes: {
light: {
primary: '#01884e'
}
}
}
};
new Vue({
vuetify: new Vuetify(opts),
// 기존 설정들...
});
#####
# activator 는 다음과 같이 사용해야 한다.
<template v-slot:activator="{ on }">
<v-btn v-on="on">...</v-btn>
</template>
# v-data-table 내의 aaa 필드값 재정의 하라면
# v-data-table 의 :headers 내의 value 이름이
# :items 의 item내 필드명과 같아야 자동 렌더링이 된다.
# item 오브젝트를 destructuring 해서 aaa 필드인 경우 처리된다.
<template v-slot:item.aaa="{ item }"></template>
# v-list-group 에서 activator 는 자동으로 전달된다.
<v-list-item slot="activator"> -> <v-list-item>
<v-toolbar-title slot="activator"> -> <v-toolbar-title>
#####
# v-data-table 내에서 expanded row(아이템 아래에 확장 화면) 버튼 커스터마이징
# header 에 "data-table-expand" 이름의 값을 추가하고
headers : [
{
text: "추가 정보",
value: "data-table-expand",
}]
# v-data-table 내에서 다음과 같이 슬롯으로 expanded 관련 정보를 받아 처리한다.
<template v-slot:item.data-table-expand="{ item, isExpanded, expand }">
<v-btn icon color="warning" @click="expand(true)" v-if="!isExpanded">expand</v-btn>
<v-btn icon color="warning" @click="expand(false)" v-if="isExpanded">close</v-btn>
</template>
#####
# 컴포넌트들 이름 변경
<v-content> -> <v-main>
<v-toolbar app> -> <v-toolbar> # app 은 v-app-bar 컴포넌트를 사용해야 한다.
<v-toolbar-side-icon> -> <v-app-bar-nav-icon>
<v-list-tile> -> <v-list-item>
<v-list-tile-avatar> -> <v-list-item-avatar>
<v-list-tile-content> -> <v-list-item-content>
<v-list-tile-title> -> <v-list-item-title>
<v-list-tile-sub-title> -> <v-list-item-subtitle>
<v-data-table :rows-per-page-items> -> <v-data-table :footer-props="{'items-per-page-options':[-1]}"
# 이 밖에도 deprecated 되거나 사용방법등이 변경되는 경우 새로 UI를 구성해야 할 수 도 있다.
# 기타 자세한 내용 참고
comments:
댓글 쓰기