时间戳

首页 > 解决方案 > 默认情况下如何使所有复选框“选中”

checkbox - 默认情况下如何使所有复选框“选中”

问题描述

我如何确保默认情况下所有复选框（从我的数据输出）在加载时都被默认检查？

输出复选框

<div v-for="(category, index) in remove_category_duplicates" class="form-check">
    <input type="checkbox" class="form-check-input" v-model="cat_data" :id="category" :value="category">
    <label class="form-check-label">{{ category }}</label>
</div>

从数据设置复选框值

    remove_category_duplicates: function () {
        // Get all categories and remove duplicates
        let data = {}
        this.info.forEach(i=>{
            Object.assign(data,i.category_data);
        })

        return data;
    },

数据： 

{
    "id": 1,
    "title": "Title one",
    "category_data": {
        "2": "Team",
        "7": "Queries"
    }
},

代码笔：https : //codepen.io/anon/pen/XxNORW ?editors=1011

谢谢

标签： checkboxvue.jsvuejs2

解决方案

要将复选框初始化为 true/checked，它们的v-model数组 ( cat_data) 应包含true每个复选框的 -value。在这种情况下，它将是：

["Team", "Questions", "Queries", "Fax"]

以下是我将如何更新您的代码：

  1. 添加计算属性以返回可用类别的数组：

    computed: {
  categories() {
    const cats = this.remove_category_duplicates;
    return Object.keys(cats).map(k => cats[k]);
  }
}

  2. 更新select()以设置cat_data为基础selectAll。如果selectAll为真，则设置cat_data为上面计算的类别数组（因此标记所有框已选中），否则为空数组（因此取消选中所有框）：

    methods: {
  select() {
    this.cat_data = this.selectAll ? this.categories : [];
  }
}

  3. 添加一个方法（例如，名为“toggleSelectAll”）以selectAll根据是否选中所有复选框进行切换，使Select All复选框与其他复选框的状态保持同步：

    methods: {
  toggleSelectAll(e) {
    const checked = e.currentTarget.checked;
    if (checked) {
      this.selectAll = this.arrayContains(this.categories, this.cat_data);
    } else {
      this.selectAll = false;
    }
  }
}

  4. 在上面定义的调用的每个复选框（全选框除外）上添加一个change-handler ：toggleSelectAll

    <div v-for="category in remove_category_duplicates">
  <input type="checkbox" @change="toggleSelectAll">

演示

推荐阅读