使用 vuex 展开/折叠 vuetify 扩展面板

Question

我有 3 个扩展面板。默认情况下，仅启用 1 个，禁用其他两个。我想要实现的是当用户提交表单时，启用其他两个扩展面板并打开第二个面板，但第三个面板保持关闭。如果我单击第一个面板，那么其他两个应该禁用并折叠。在展开 1 个面板中的任何一个时，另外 2 个面板保持关闭。为了实现这一点，我正在使用带有 vuex 的 vuetify 扩展面板。这是我的代码：

1-Store.js

//store.js
const state = {
   userDetails: null,
   form1: false,
   userFormTwo: null,
   panel: [true, false, false]
}

// getters
const getters = {
   userDetails: state => {
      return state.userDetails;
   },
   form1: state =>{
      return state.form1;
   },
   userFormTwo:state =>{
      return state.userFormTwo;
   },
   panel: state => {
      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,
}

2- Expansion.vue- 我在哪里导入组件

//Expansion.vue
<template>
   <div>
        <v-expansion-panel dark expand v-model="expansionPanelToggle">
         <user-form></user-form>
         <reports></reports>
         <table></table>
      </v-expansion-panel>
   </div>
</template>

<script>
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
    }
}
</script>

3- UserForm.vue

<template>
  <v-expansion-panel-content>
      <v-card>
         <v-card-text>
            <v-form ref="form" v-model="valid">
               <v-flex lg4 xl4 xs12 sm6 md6>
                  <v-text-field v-model="userInfo.firstName" :rules="inputRules.basictextRules" label="First Name*" required></v-text-field>
               </v-flex>
               <v-flex lg4 xl4 xs12 sm6 md6>
                  <v-text-field v-model="userInfo.lastName" :rules="inputRules.basictextRules" label="Last Name*" required></v-text-field>
               </v-flex>
                    <div>
                <v-btn pl-0 ml-0 large @click="addUserDetails">Continue To Payment</v-btn>
                    </div>
                </v-form>
         </v-card-text>
      </v-card>
  </v-expansion-panel-content>
</template>

<script>
    export default{
    data () {
        return {
            valid: false,
            userInfo:{
                firstName : '', 
                lastName :'',
           },
                inputRules: {
                    basictextRules: [v => !!v || 'This field should not be empty.'],
                    emailRules: [
                        v => !!v || "This field should not be empty.",
                        v =>
                        /^\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);
                }               
            }
      }
   }
</script>

添加用户后，我通过 vuex 将禁用字段更改为 false 来启用其他两个面板。在这里您可以看到我如何更改“禁用”属性值：

报告.vue

// reports.vue
<template>
   <v-expansion-panel-content class="primary" :disabled="!form1" :class="{'display-form': !form1}" >
   <h4 >Reports</h4>
   <v-btn icon @click="userFormTwo"><v-icon>send</v-icon></v-btn>
</v-expansion-panel-content>
</template>
<script>
    import { mapGetters } from 'vuex';      
   export default{
        computed: {
            ...mapGetters(["form1"])
        },
        methods: {
           userFormTwo(){
             this.$store.dispatch("userFormTwo",'submit');
           }
        }
   }
</script>

提交 userformTwo 后，第三个面板打开，其余面板关闭。 通过此代码一切正常。我面临的问题是在除第一个面板之外的其他 2 个面板之间。当时我无法准确打开 1 个面板。第二个和第三个面板的值相互冲突，因为如果其他面板打开，扩展面板不会关闭。希望我已经清楚地解释了我的问题。如果有人有任何疑问，请问我。任何帮助将不胜感激。谢谢！

Answer 1

我认为您在父组件 Expansion.vue 中使用扩展面板并在 User.vue 和 中包含扩展面板内容没有任何好处报告.vue。我在没有扩展面板内容标签的子组件中取得了成功……只有卡片或文本。它们保存您的内容和表单数据。所以 Expansion.vue 看起来更像：

<v-expansion-panel v-model="panel" expandable>
  <v-expansion-panel-content :key="1">
     <div slot="header">
       <h2>User Form</h2>
     </div>
     <user-form></user-form>
  </v-expansion-panel-content>
   <v-expansion-panel-content :key="2">
     <div slot="header">
       <h2>Reports</h2>
     </div>
     <reports></reports>
   </v-expansion-panel-content>
   ...
</v-expansion-panel>

因此，如果您尝试使用面板 1 提交表单数据，然后关闭面板 1，然后打开面板 2，您只希望您的操作 addUserDetails 提交一个更改，将面板的状态更改为 [false, true, false ]。您的代码有一个名为 panel 的 getter 和一个名为 panel 的 state。这不应该是这样。这不会导致错误吗？我认为使用 getter 没有任何好处。我会在 Expansion.vue 中使用 mapState 而不是 mapGetters。子组件可以调度提交更改的操作，将状态更改为您希望的状态。

panel: {
   get() {
     return this.$store.state.panel;
   },
   set(val) {
     this.$store.commit("togglePanelHandler", val);
   }

希望这会有所帮助。