Question

我有3个扩展面板。默认情况下，仅启用1，禁用其他2。我要达到的目的是，当用户提交表单时，其他两个扩展面板将启用，并在那时打开第二个面板。如果单击第一个面板，则应禁用其他两个面板。为此，我将vuetify扩展面板与vuex一起使用。这是我的代码：

1-Store.js

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

// getters
const getters = {
   userDetails: state => {
      return state.userDetails;
   },
   form1: state =>{
      return state.form1;
   },
   panel: state => {
      return state.panel;
   }
}

// actions
const actions = {
   addUserDetails(context, payload) {
      context.commit('onAddedUserDetails', 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];
   },

   togglePanelHandler(state,payload){
      state.panel = payload;
        console.log(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来启用其他两个面板。在这里，您可以看到我如何更改“无效”属性值：

Reports.vue

// reports.vue
<template>
   <v-expansion-panel-content class="primary" :disabled="!form1" :class="{'display-form': !form1}" >
   <h4 >Reports</h4>
</v-expansion-panel-content>
</template>
<script>
    import { mapGetters } from 'vuex';      
   export default{
        computed: {
            ...mapGetters(["form1"])
        }
   }
</script>

通过此代码，一切正常。我面临的问题是除第一个面板以外的其他两个面板之间的问题。当时我无法完全打开1个面板。第二和第三面板的值彼此冲突，这是因为如果其他面板打开，则这些扩展面板不会关闭。希望我已经清楚地解释了我的问题。如果有人有任何疑问，请问我。任何帮助将不胜感激。谢谢！

Answer 1

在父组件 Expansion.vue 中使用扩展面板，并且在 User.vue 和中使用扩展面板的内容，对您没有任何好处Reports.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的状态。事实并非如此。这不是引起错误吗？我认为使用吸气剂没有任何好处。我会在Expansion.vue中使用mapState而不是mapGetters。子组件可以调度执行突变的操作，这些突变会将状态更改为所需的状态。

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

希望这会有所帮助。

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

1 个答案: