vue實現checked 全選功能

記錄一下

 

module.data = {

 result: {}, items: []
//初始化全選按鈕, 默認不選
,isCheckedAll: false
};
module.vue = new Vue({
el: moduleId,
data: module.data,
methods: {

CheckItem: function (item) {

 console.log(item);//true
            let idIndex = this.items.indexOf(item) if (idIndex >= 0) { // 如果已經包含了該id, 則去除(單選按鈕由選中變為非選中狀態)
                this.items.splice(idIndex, 1) } else { // 選中該checkbox
                this.items.push(item) } console.log(this.items); }, CheckAll: function () { console.log(module.data.result.Data); this.isCheckedAll = !this.isCheckedAll if (this.isCheckedAll) { // 全選時
                this.items = [] this.result.Data.forEach(function (x) { this.items.push(x.Id) }, this) } else { this.items = [] } console.log(this.items); }

}
});

<input type="checkbox" id="qx" v-on:click="CheckAll()" />全選

<input type="checkbox" name="ck" v-on:click="CheckItem(x.Id)" :checked="items.indexOf(x.Id)>=0" :value="x.Id" />