Vuetify v-expansion-panels 对 :active-class 变化没有反应

Question

我不确定这里发生了什么，但似乎我无法动态更改我的 v-expansion-panels 的 active-class 道具的 class。

我正在尝试根据模型状态（通过单击按钮更改）在绿色和红色之间更改它，但即使模型更改，v-expansion-panels 也不会选择新的活动 class.

这里可能做错了什么，但无法弄清楚。

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>

提前致谢！

Answer 1

应用活动的 class 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/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>

Vuetify v-expansion-panels 对 :active-class 变化没有反应

Vuetify v-expansion-panels not reacting to :active-class change

class

styling

vue.js

vuetify.js