Nuxt.JS (Vue.JS) 和 VueX 将表单绑定到 VueX 存储中的对象数组答案

【问题标题】：Nuxt.JS (Vue.JS) and VueX binding a form to an array of objects in a VueX storeNuxt.JS (Vue.JS) 和 VueX 将表单绑定到 VueX 存储中的对象数组
【发布时间】：2019-05-30 21:34:53
【问题描述】：

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

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

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

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

我们将不胜感激所有帮助！

【问题讨论】：

自从我使用 Vue 以来已经有一段时间了，但与 vuejs.org/v2/guide/computed.html 相比，您似乎在强制 () {} 处缺少了一个“：”。我还建议使用chrome.google.com/webstore/detail/vuejs-devtools/…
您好，谢谢您的评论。我正在使用 Vue.JS，但在 Nuxt.JS 框架内，不需要 :。该属性确实已经存在，我遇到的问题是与表单的绑定。我已经在使用 vue devtools
不是一个真正的“解决方案”，但这个包可能会让事情变得更容易github.com/maoberlehner/vuex-map-fields
谢谢，我去试试
我使用了相同的包，所以可以确认它的用途

标签： javascript vue.js vuex nuxt.js

【解决方案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>

【讨论】：