Question

在将表单绑定到对象数组的Defaultsettings列表中时，我需要一些帮助。我正在使用NuxtJs和VueX，这是我创建的Defaultsettings的列表：

名称默认设置（仅文本）
处于活动状态（确定默认设置的开关按钮是否处于活动状态-布尔值）
强制性（确定是否需要默认设置的单选按钮-布尔值）

这是我到目前为止所拥有的。

使用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>

Nuxt.JS（Vue.JS）和VueX将表单绑定到VueX存储中的对象数组

1 个答案: