Vue.js - 如果在数组中，请选中一个复选框答案

【问题标题】：Vue.js - Check a checkbox if in arraysVue.js - 如果在数组中，请选中一个复选框
【发布时间】：2016-12-07 05:06:19
【问题描述】：

处理在 v-for 循环中包含复选框的视图：

<ul class="object administrator-checkbox-list">
    <li v-for="module in modules">
        <label v-bind:for="module.id">
            <input type="checkbox" v-model="form.modules" v-bind:value="module.id" v-bind:id="module.id" v-if=>
            <span>@{{ module.name }}</span>
        </label>
    </li>
</ul>

我还有一个“表单”数据（使用 Laravel Spark 表单对象），它可以访问一个“currentModules”属性，该属性包含与模块表的当前资源关系。

我希望检查 currentModules 属性中存在的复选框。

v-for 数据中使用的“模块”数据示例：

[
    { 
        "id": 1, 
        "name": "Business", 
        "created_at": "2016-11-23 09:57:03", 
        "updated_at": "2016-11-23 09:57:03" 
    },
    { 
        "id": 2, 
        "name": "Houses", 
        "created_at": "2016-11-23 09:57:03", 
        "updated_at": "2016-11-23 09:57:03" 
    }
]

“form.currentModules”中的数据格式完全相同。如果模块 id 在使用 Vue 的 currentModules 中，如何检查复选框？

【问题讨论】：

您还想在单击复选框时从form.currentModules 添加/删除模块吗？
不，这在其他地方处理只需将它们设置为在初始页面加载时检查。目前正在寻找过滤器是否可以让我最简单地做到这一点。 @asemahle

标签： javascript checkbox vue.js

【解决方案1】：

要选择框，您form.modules 包含所选项目的ID，即：

data: function () {
  return {
    form: {
      modules: [1, 2]
    },
    // ...
  }
}

查看this bin 以查看示例：-)

【讨论】：