title: Expand/Collapse vuetify expansion panel with vuex
body: <p>I am having 3 expansion panels. By default, only 1 is enabled and other two's are disabled. What I am trying to achieve is that <strong>when user submit the form then other two expansion panels enabled and open 2nd panel at that time but 3rd panel remains closed. If I click on first panel then other two should disabled and collpased. On expanding any of the 1 panel, another 2 panels remains closed</strong>. To achieve this I am using vuetify expansion panel with vuex. Here is my code:</p>
  
  <p>1-Store.js </p>
  
  <pre><code>//store.js
  const state = {
     userDetails: null,
     form1: false,
     userFormTwo: null,
     panel: [true, false, false]
  }
  
  // getters
  const getters = {
     userDetails: state =&gt; {
        return state.userDetails;
     },
     form1: state =&gt;{
        return state.form1;
     },
     userFormTwo:state =&gt;{
        return state.userFormTwo;
     },
     panel: state =&gt; {
        return state.panel;
     }
  }
  
  // actions
  const actions = {
     addUserDetails(context, payload) {
        context.commit('onAddedUserDetails', payload);
     },
     userFormTwo(context,payload){
      context.commit('onUserFormtwo',payload);
     },
     togglePanel(context, payload) {
        context.commit('togglePanelHandler', payload);
     }
  }
  
  // mutations
  const mutations = {
  
     onAddedUserDetails(state, payload) {
        state.userDetails = payload;
        state.form1 = true;
        state.panel = [false, true, false];
     },
     onUserFormtwo(state,payload){
        state.userFormTwo = payload;
        state.panel = [false,false,true]
     },
     togglePanelHandler(state,payload){
        state.panel = payload;
        if(state.panel[0] == true ){
          state.panel[1] = false;
              state.panel[2] = false;
              state.form1 = false;
        }
     }
  }
  
  export default {
     state,
     getters,
     actions,
     mutations,
  }
  </code></pre>
  
  <p>2- Expansion.vue- Where I am importing the components</p>
  
  <pre><code>//Expansion.vue
  &lt;template&gt;
     &lt;div&gt;
          &lt;v-expansion-panel dark expand v-model="expansionPanelToggle"&gt;
           &lt;user-form&gt;&lt;/user-form&gt;
           &lt;reports&gt;&lt;/reports&gt;
           &lt;table&gt;&lt;/table&gt;
        &lt;/v-expansion-panel&gt;
     &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import userForm from './Component/userForm'
  import reports from './Component/reports'
  import table from './Component/table'
  import { mapGetters } from 'vuex';
  
  export default {
      computed: {
          ...mapGetters("panel"),
          expansionPanelToggle: {
              get() {
                  return this.$store.getters.panel;
              },
              set(val) {
                  this.$store.dispatch("togglePanel", val);
              }
          }
      },
      components:{
          userForm:userForm,
          reports:Reports,
          table:Table
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>3- UserForm.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-expansion-panel-content&gt;
        &lt;v-card&gt;
           &lt;v-card-text&gt;
              &lt;v-form ref="form" v-model="valid"&gt;
                 &lt;v-flex lg4 xl4 xs12 sm6 md6&gt;
                    &lt;v-text-field v-model="userInfo.firstName" :rules="inputRules.basictextRules" label="First Name*" required&gt;&lt;/v-text-field&gt;
                 &lt;/v-flex&gt;
                 &lt;v-flex lg4 xl4 xs12 sm6 md6&gt;
                    &lt;v-text-field v-model="userInfo.lastName" :rules="inputRules.basictextRules" label="Last Name*" required&gt;&lt;/v-text-field&gt;
                 &lt;/v-flex&gt;
                      &lt;div&gt;
                  &lt;v-btn pl-0 ml-0 large @click="addUserDetails"&gt;Continue To Payment&lt;/v-btn&gt;
                      &lt;/div&gt;
                  &lt;/v-form&gt;
           &lt;/v-card-text&gt;
        &lt;/v-card&gt;
    &lt;/v-expansion-panel-content&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default{
      data () {
          return {
              valid: false,
              userInfo:{
                  firstName : '', 
                  lastName :'',
             },
                  inputRules: {
                      basictextRules: [v =&gt; !!v || 'This field should not be empty.'],
                      emailRules: [
                          v =&gt; !!v || "This field should not be empty.",
                          v =&gt;
                          /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
                          "E-mail must be valid"
                      ]
                  },
           }
        },
        methods: {
           addUserDetails(){
                  this.$refs.form.validate()
                  if(this.valid == true){
                      this.$store.dispatch("addUserDetails", this.userInfo);
                  }               
              }
        }
     }
  &lt;/script&gt;
  </code></pre>
  
  <p>When user is added I enabled the other two panels by changing disabled field to false through vuex.  Here you can see how i am changing "disabed" attribute value:</p>
  
  <p>Reports.vue</p>
  
  <pre><code>// reports.vue
  &lt;template&gt;
     &lt;v-expansion-panel-content class="primary" :disabled="!form1" :class="{'display-form': !form1}" &gt;
     &lt;h4 &gt;Reports&lt;/h4&gt;
     &lt;v-btn icon @click="userFormTwo"&gt;&lt;v-icon&gt;send&lt;/v-icon&gt;&lt;/v-btn&gt;
  &lt;/v-expansion-panel-content&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import { mapGetters } from 'vuex';      
     export default{
          computed: {
              ...mapGetters(["form1"])
          },
          methods: {
             userFormTwo(){
               this.$store.dispatch("userFormTwo",'submit');
             }
          }
     }
  &lt;/script&gt;
  </code></pre>
  
  <p>After submit userformTwo, 3rd panels open and rest of the panels closed.
   All is working fine through this code. the issue I am facing is between other 2 panels except 1st panel. I am unable to open exactly 1 panel at that time. Values for 2nd and 3rd panel are  clashing with each other due to which expansion panels are not closing if other is open. Hope I have explained my question clearly. If anyone is having any doubt please ask me. Any help will be appreciated. Thanks!</p>