Nuxt.JS（Vue.JS）和VueX將表單綁定到VueX存儲中的對象數組

Question

我需要一些將表單綁定到對象數組中的Defaultsettings列表的幫助。 我正在使用NuxtJs和VueX，這是我創建的Defaultsettings的列表：

• 名稱defaultsetting（僅文本）
• 活動的（確定默認設置為活動的開關按鈕-布爾值）
• 必選（確定是否需要默認設置的單選按鈕-布爾值）

這是我到目前為止所擁有的。

使用Axios，我進行服務器端調用以檢索默認設置列表，然后將其分派到作業存儲

        asyncData(context) {
        return context.app.$axios
            .$get('jobs/create')
            .then(data => {            
                context.store.dispatch('jobs/getDefaultsettings', data.defaultsettings)
            })
            .catch(e => context.error(e))
    },

在jobs.js中，此函數被調用：

getDefaultsettings(context, data) {
    context.commit('setDefaultsettings', data)
},

然后，getDefaultsettings將數據提交到setDefaultsettings：

    setDefaultsettings(state, data) {

    data.forEach(function(d) {
        d.mandatory = false
        d.active = false
    })
    state.defaultsettings = data
},

為了在數據中包含默認設置，我將state.defaultsettings存儲在創建的函數中。

        created() {
        this.ruleForm.defaultsettings =  this.$store.state.vacatures.defaultsettings

    }

但這是我感到困惑的地方。 綁定數據的最佳方法是什么。 我確實找到了以下示例： https : //vuex.vuejs.org/guide/forms.html ，但我似乎無法使其正常運行。 我收到錯誤消息“無法讀取未定義的屬性”

<div class="row" v-for="defaultsetting in ruleForm.defaultsettings " :key="defaultsetting.id">
<div class="col-sm-4">
    {{defaultsetting.name}}
</div>
<div class="col-sm-4">
    <el-checkbox v-model="defaultsetting.mandatory" :value="mandatory" @input="updateMandatory"/>
</div>

我添加了強制性作為計算屬性：

        computed: {
        mandatory () { return this.$store.state.vacatures.defaultsetting.mandatory }

    },

並在方法中：

 methods: {

        updateMandatory (e) {
            this.$store.commit('updateMandatory', e.target.value)
        },
    },

在jobs.js中，我添加了突變：

updateMandatory (state, setting) {
    state.defaultsetting.mandatory = setting
},

所有幫助將不勝感激！

Answer 1

我沒有讓vuex-map-fields與Nuxt.JS配合使用，所以我將存儲數據映射到created（）中

        created() {
        this.ruleForm.defaultsettings =  this.$store.state.jobs.defaultsettings.map((obj) =>  Object.assign({}, obj))

    }

現在，當循環遍歷this.ruleForm.defaultsettings時，我可以使用v-model更改狀態

<div class="row" v-for="(defaultsetting, index) in ruleForm.defaultsettings " v-if="defaultsetting.groupsequence === 1"  >
                        <div class="col-sm-4">
                            {{defaultsetting.label}}
                        </div>
                        <div class="col-sm-4">
                            <el-switch
                            style=""
                            v-model="ruleForm.defaultsettings[index].active"

                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            />
                        </div>
                        <div class="col-sm-4" v-if="ruleForm.defaultsettings[index].active === true">
                             <el-checkbox v-model="ruleForm.defaultsettings[index].mandatory"  />
                        </div>
                    </div>