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>