CODEWITHSUNDEEP
javascriptvue.jsvuejs2vuetify.js
code-8
code-8

Reputation: 58642

How to force collapse all expansion panels?

I want to force close my expansion panel when I clicked Update

enter image description here

How do I programmatically do that ?

This is what I have in my update().

update(index) {
  console.log("index", index);

  let vehicle = {};
  vehicle.VIN = this.savedVehicles[index].VIN;
  vehicle.ModelYear = this.savedVehicles[index].ModelYear;
  vehicle.Make = this.savedVehicles[index].Make;
  vehicle.Model = this.savedVehicles[index].Model;

  this.savedVehicles[index] = vehicle;
  localStorage.setItem("savedVehicles", JSON.stringify(this.savedVehicles));

  this.alert = true;
  this.alertColor = "green";
  this.alertMessage = `${vehicle.VIN} updated`;

  // hope to collapse all expansion panels 👈🏽👈🏽👈🏽

},

Upvotes: 0

Views: 146

Answers (1)

Neha Soni
Neha Soni

Reputation: 4674

Expansion panels can be controlled externally by modifying the v-model. Its value corresponds to a zero-based index of the currently opened expansion panel content. If multiple props are used then it is an array containing the indices of the open items.

  1. To control the opening and closing status of multiple panels
    https://codepen.io/pen?&editors=101

  2. If need to control only a single expansion panel then use this-

<template>
  <v-expansion-panels v-model="panel">
     // any code here
  </v-expansion-panels>
  <button @click="closePanel()">Close</button>
</template>
<script>
export default {
  data() {
    return {
      panel: 0 // This means should open by default
    }
  },
  methods: {
    closePanel() {
      this.panel = null; // null is to close the panel
    }
  }
}
</script>

Upvotes: 1

Related Questions