javascript - Change Accordion icon dynamically in Vue

Question

I have made an expansion panel in Vue using Vuetify. I am using firestore to populate data in the panels and I have also given a button to "mark as complete" in the panels. My firestore query works just fine and the data gets updated. What I am not able to get done is change the background color or change the icon of the drop-down panels which is by default set to down arrow, after my database update as a form of graphical feedback to the user.

As you can see in the image above, I need the expanded panel to either change its icon to a check mark or the entire background color to go green once I click on the right green check mark at the bottom of the panel.

I tried to set the color property of the panel headers dynamically but it doesn't work that way. Below is the code where I want it to work.

methods: {
    complete(id) {
      db.collection("orders")
        .doc(id)
        .update({
          status: "deliverd",
        })
        .then(() => {
          console.log("sdf");
        });
    },

question from:https://stackoverflow.com/questions/65915205/change-accordion-icon-dynamically-in-vue

Answer 1

I assume you are using the v-expansion-panel component from Vuetify.

Problem : Dynamically change the icon or the background-color of v-expansion-panel-header

Solution : The component offers a prop called expand-icon which allows to change the icon of the v-expansion-panel-header - or via action slot

<v-expansion-panel-header expand-icon="mdi-check" disable-icon-rotate>
  Item
</v-expansion-panel-header>

<v-expansion-panel-header :expand-icon="icon" disable-icon-rotate>
  Item
</v-expansion-panel-header>

<v-expansion-panel-header disable-icon-rotate>
  Item
  <template v-slot:actions>
    <v-icon color="teal">
      mdi-check
    </v-icon>
  </template>
</v-expansion-panel-header>

<v-expansion-panel-header disable-icon-rotate>
  Item
  <template v-slot:actions>
    <v-icon color="teal">
      {{ icon }}
    </v-icon>
  </template>
</v-expansion-panel-header>

Please note the use of disable-rotate-icon to disable icon rotation when the expansion panel opens.

---

If you're not sure how this should be applied using Vue I suggest reading a quick Getting Started guide. However I drafted a quick example using the vuetify components in this CodeSandbox Example. Please see this example just as a pointer, there would be 100 of ways how to implement this in an app. Like this, it's not meant to use in production code.