【发布时间】：2020-08-29 09:00:17
【问题描述】：
在这里，我一直在使用 vuetify 主题来更改应用程序和导航栏的背景颜色，使用弹出表单来选择应用程序和导航栏的颜色，但由于某种原因，我的颜色按钮无法更改应用程序和导航栏的背景颜色。我正在使用 vuetify 颜色和主题来更改背景颜色。
<template>
<nav>
<v-app-bar color="primary darken-3"
height="45px"
clipped
dark app>
<v-app-bar-nav-icon @click.stop="drawer = ! drawer">
</v-app-bar-nav-icon>
<v-spacer> </v-spacer>
<v-btn text icon>
<v-icon style="">mdi-star</v-icon>
</v-btn>
<v-menu offset-y origin="center center" class="elevation-1" :nudge-bottom="14" transition="scale-transition" max-width="10">
<v-btn icon text slot="activator">
<v-badge color="red" overlap>
<span slot="badge">3</span>
<v-icon medium>mdi-bell</v-icon>
</v-badge>
</v-btn>
<notification-list></notification-list>
</v-menu>
<v-menu
bottom
offset-y
:nudge-bottom="10"
>
<template v-slot:activator="{ on }">
<v-btn
dark
icon
v-on="on"
>
<span><v-icon>mdi-account-circle-outline</v-icon></span>
</v-btn>
</template>
<v-list flat>
<v-list-item active-class="border">
<v-list-item-icon style="padding-left: 10px; padding-right: 10px" >
<v-icon>mdi-account-circle-outline</v-icon>
</v-list-item-icon>
<v-list-item-title>Profile</v-list-item-title>
</v-list-item>
<v-list-item class="ml-1" active-class="border">
<v-list-item-icon>
<v-icon >mdi-logout-variant</v-icon>
</v-list-item-icon>
<v-list-item-title>logout</v-list-item-title>
</v-list-item>
<v-list-item @click.stop="dialog = true">
<v-list-item-icon >
<v-icon>mdi-select-color</v-icon>
</v-list-item-icon>
<v-list-item-title>Theme</v-list-item-title>
<v-dialog
v-model="dialog"
max-width="290"
>
<v-card>
<v-card-title>Theme</v-card-title>
<v-card-text>
<v-btn
v-for="item in colors"
:key="item"
:color="item"
@click="changeTheme(item)"
class="ma-2"
>
<template v-if="theme != item" v-slot:default>
<span class="text-truncate" style="width:120px;">
{{item.replace(/-/g, '')}}
</span>
</template>
</v-btn>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" text @click="dialog = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-navigation-drawer @click="!drawer"
dark
app
stateless
border
color="primary darken-1"
value="true"
:mini-variant="drawer">
<v-layout column align-center>
<v-flex class="ma-2">
<v-avatar>
<v-img width="80" :src="require('../../../images/chillibiz.png')"> </v-img>
</v-avatar>
<p v-if="!drawer" class="white--text subheading mt-1 text-center" style="font-size:0.9em">ChilliBiz</p>
</v-flex>
</v-layout>
<v-divider class=" mt-0 mb-0" />
<v-list nav
dense
class="py-0" >
<v-list-item v-for="item in menus" :key="item.name" :to="item.url" >
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-if="item.url=='/'">{{ item.name }}</v-list-item-title>
<v-list-item-title v-if="item.url=='/hr'">{{ item.name }}<hrm/></v-list-item-title>
<v-list-item-title v-if="item.url=='/inventory'">{{ item.name }}<master/></v-list-item-title>
<v-list-item-title v-if="item.url=='/finace&accounts'">{{ item.name }}<finance/></v-list-item-title>
<v-list-item-title v-if="item.url=='/reports'">{{ item.name }}</v-list-item-title>
<v-list-item-title v-if="item.url=='/system'">{{ item.name }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</nav>
</template>
<script>
import hrm from "./HRcomponent"
import master from "./MasterComponent"
import finance from "./FinanceComponent"
export default {
data() {
return {
drawer:false,
dialog: false,
searchOpen: false,
menus: [
{icon:'',name:'', url:''}
],
theme: '',
colors: ["red","pink","purple","deep-purple","indigo","blue","light-blue","cyan","teal","green","light-green","lime","yellow","amber","orange","deep-orange","brown","blue-grey","grey", "black"],
}
},
methods: {
changeTheme (item) {
this.theme = item
this.$vuetify.theme.themes.dark.primary = this.theme
}
},
created() {
axios
.get('api/menuslevel0')
.then(response => (this.menus = response.data))
},
components :{
hrm,
master,
finance
}
}
</script>
【问题讨论】：
标签： vue.js vue-component vuetify.js