我不確定這里發生了什么，但似乎我無法動態更改 v-expansion-panels 的 active-class prop 的類。
我試圖根據模型狀態（通過單擊按鈕更改）在綠色和紅色之間更改它，但即使模型更改了 v-expansion-panels 也不會選擇新的活動類。
可能在這里做錯了什么，但無法弄清楚。
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
edited: false,
}
},
computed: {
activeClass() {
return this.edited ? 'active-panel-edited' : 'active-panel-normal';
}
}
})<style scoped>
.active-panel-edited {
background-color: #ff000038 !important;
}
.active-panel-normal {
background-color: #00ff1438 !important;
}
</style><html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app>
The current active class: {{activeClass}}
<v-expansion-panels :active-class="activeClass">
<v-expansion-panel
v-for="(item,i) in 5"
:key="i"
>
<v-expansion-panel-header>
Item
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sait amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<v-btn @click="edited = !edited">Change Color</v-btn>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-app>
</div>
</body>
</html>先感謝您！
uj5u.com熱心網友回復：
應用活動類 v-expansion-panel 而不是 v-expansion-panels
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
edited: false,
}
},
computed: {
activeClass() {
return this.edited ? 'active-panel-edited' : 'active-panel-normal';
}
}
})<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<style>
.active-panel-edited {
background-color: #ff000038 !important;
}
.active-panel-normal {
background-color: #00ff1438 !important;
}
</style>
</head>
<body>
<div id="app">
<v-app>
The current active class: {{activeClass}}
<v-expansion-panels>
<v-expansion-panel
:active-class="activeClass"
v-for="(item,i) in 5"
:key="i"
>
<v-expansion-panel-header>
Item
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sait amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<v-btn @click="edited = !edited">Change Color</v-btn>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-app>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395502.html
標籤：Vue.js 班级 Vuetify.js 造型