代码之家 › 专栏 › 技术社区 › wbdlc

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

vuejs2 vue.js checkbox

0

wbdlc · 技术社区 · 7 年前

如何确保默认情况下所有的复选框(从我的数据输出)在加载时都被默认选中?

输出复选框

<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

1 回复 | 直到 7 年前

1

tony19 thanksd 7 年前

要将复选框初始化为true/checked v-model cat_data )应该包含 true -每个复选框的值。在这种情况下,应该是:

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

下面是我如何更新您的代码:

添加 computed property 要返回可用类别的数组,请执行以下操作:

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

select() 设置 cat\U数据 selectAll . 如果 全选 cat\U数据

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

添加一个方法(例如,名为“toggleSelectAll”)以切换 全选 根据是否选中所有复选框,保留全选

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

添加 change -每个复选框上的处理程序(除全选框)调用 toggleSelectAll

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

demo