V-扩展板不对:主动级别的变化作出反应
V-扩展板不对:主动级别的变化作出反应
提问于 2021-12-25 12:27:01
我不知道这里发生了什么，但似乎我不能动态地改变我的v扩展面板的活动类支柱的类。
我试图根据模型状态(单击按钮改变)在绿色和红色之间进行更改，但即使模型改变了v扩展面板，也不会选择新的活动类。
可能在这里做错了什么，但我想不出来。
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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>
提前谢谢你！
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-25 13:40:18
应用活动类v-展开面板而不是v-展开面板。
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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70480012
复制相关文章
相似问题
腾讯云开发者
