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

I am not sure what is happening here, but seems like I can't change the class of the active-class prop of my v-expansion-panels dynamically.

I am trying to change it between green and red depending on a model state (changed by a click on a button), but even though the model changes the v-expansion-panels doesn't pick the new active class.

Might be doing something wrong here, but can't figure it out.

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->
    <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>

Thank you in advance!

CodePudding user response：

apply the active class v-expansion-panel instead of 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-
      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>