Vue.js VueJs：使用Vuex处理表单和使用API生成的输入

下面是一个组件示例：

<script>
    export default {
        name: 'my-form',

        computed: {
            myModules() {
                return this.$store.state.myModules;
            }
        }
</script>

<template>
    <form>
        <p v-for="module in myModules">
            <input type="checkbox" :value="module.id" />
            <label>module.name</label>
        </p>
        <button type="submit">Submit</button>
    </form>
</template>

最后，返回API“getModules”的示例：

我的问题：当我直接在商店中选中与相关模块对应的复选框时，将每个模块的“isActive”属性更改为“true”的最佳方法是什么？

我知道Vuex的文档建议使用“”来管理表单，但我不知道API可能返回的模块数量，也不知道它们的名称

---

提前谢谢你

这是一个有点邪恶的方法，但它是有效的。可以为循环中访问的每个项目创建访问器对象：

const store=新的Vuex.store({
突变：{
setActive（状态，{index，value}）{
state.modules[index].isActive=value
}
},
声明：{
模块：[
{
id:1，
名称：“模块1”，
isActive:错误
},
{
id:2，
名称：“模块2”，
isActive:错误
},
{
id:3，
名称：“模块3”，
isActive:错误
}
]
}
});
const app=新的Vue({
el:'目标'，
商店，
方法：{
型号（id）{
const store=this.$store；
//这里我返回一个对象，该对象的value属性绑定到
//由于Vue，特定模块和控制模块保持了反应性
返回Object.defineProperty（{}，'值'{
得到（）{
return store.state.modules[id].isActive
},
设置（值）{
commit（'setActive'，{index:id，value}）；
}
});
}
}
})

模块{{item.id}}状态：{{item.isActive}
模块#{item.id}

我为您提供了另一种解决方案。您可以为复选框创建一个子组件来稍微清理代码

UPD:我刚刚意识到我和@etki提出的所有建议都是过分的。我在下面留下了我的代码的旧版本，以防你还想看一下。这里有一个新的：

const模块=[{
id:1，
名称：“模块1”，
是的，
},
{
id:2，
名称：“模块2”，
I：错，
},
{
id:3，
名称：“模块3”，
I：错，
},
];
const store=新的Vuex.store({
声明：{
myModules:[]，
},
突变：{
设置模块（状态、模块）{
state.myModules=模块；
},
切换_模块（状态，id）{
state.myModules.some（（el）=>{
如果（el.id==id）{
el.isActive=！el.isActive；
返回true；
}
})
}
},
行动：{
获取模块({
犯罪
}) {
返回新承诺（（履行）=>{
设置超时（（）=>{
提交（'SET_MODULES'，MODULES）；
完成（模块）；
}, 500)
});
}
}
});
const app=新的Vue({
el:“应用程序”，
商店，
数据：{}，
方法：{
切换（id）{
console.log（id）；
此.store.commit（'TOGGLE_MODULE'，id'）；
}
},
计算：{
myModules（）{
返回此。$store.state.myModules；
},
输出（）{
返回JSON.stringify（this.myModules，null，2）；
},
},
安装的（）{
这个.store.dispatch（'getModules'）。然后（（）=>console.log（this.myModules））；
}
})

{{data.name}}:{{data.isActive}
Vuex州：

我真的不知道这是否是一个好的做法，但它非常有效！谢谢。如果你有兴趣，看看我的解决方案。我发现他们更有条理。这也是一个很好的解决方案，谢谢！Etki的解决方案保留了“v型”系统，而您的解决方案则不那么冗长。但是这两种方法都有效。@Baptiste

v-model

在我基于子组件的第一个版本中仍然使用

    state: {
        myModules: []
    },

    mutations: {
        setModules(state, modules) {
            state.myModules = modules;
        }
    },

    actions: {
        getModules({commit}) {
            return axios.get('modules')
            .then((response) => {
                commit('setModules', response.data.modules);
            });
        }
    }

modules : [
    {
        id: 1,
        name: 'Module 1',
        isActive: false
    },
    {
        id: 2,
        name: 'Module 2',
        isActive: false
    },
    {
        id: 3,
        name: 'Module 3',
        isActive: false
    }
]