自定义多个checkbox点击查询数据方法

项目中存在多个checkbox，点击其中一项根据条件查询数据的时候，我们将查询条件定义成数组，根据点击传入的参数，向数组中添加或删除数组中元素生成新的查询条件。

1.页面结构

<div v-bind:class="{'active': choose1 }">
	<input type="checkbox" value="1" v-model="choose1" @click="choose('条件1')"/>
	<label>条件1</label>
</div>
<div v-bind:class="{'active': choose2 }">
	<input type="checkbox" value="2" v-model="choose2" @click="choose('条件2')"/>
	<label>条件2</label>
</div>

2.初始化data

data()  {
	return {
		choose1: true,
        choose2: true,
        conditions: ['条件1', '条件2']
	}
}

3.自定义方法

choose(c) {
	let conditions = this.conditions;
	if(c === '条件1' && this.choose1) {
		this.choose1 = false;
		// 去除数组中指定元素
        let index = c.indexOf('条件1');
        if (index > -1) {
          c.splice(index, 1);
        }
	} else if (c === '条件1' && !this.choose1) {
		this.choose1 = true
		c.push('条件1');;
	}
	if(c === '条件2' && this.choose2) {
		this.choose2 = false;
		// 去除数组中指定元素
        let index = c.indexOf('条件2');
        if (index > -1) {
          c.splice(index, 1);
        }
	} else if (c === '条件2' && !this.choose2) {
		this.choose2 = true
		c.push('条件1');;
	}
	
let obj = {
	c: c, // 存放筛选数据条件数组
	ch: { // 存放勾选按钮状态的对象
    	ch1: this.choose1,
    	ch2: this.choose2
          }
    };
    this.chooseAjax(obj);
}

chooseAjax(obj)  {
	// 改变checkbox按钮状态
	this.choose1 = obj.ch.ch1;
    this.choose2 = obj.ch.ch2;
    // 根据条件发送ajax
    ...
}