在vue中使用checkbox

在vue项目中如何使用多选框？结合前段时间工作中的需求写了这个笔记。

在template里面写入<input>标签并指定类型type为checkbox，:value用来绑定当前项的value，v-model绑定一个数组，一旦当前项被选中，该项的value会被添加至被绑定的数组中。

place为绑定的数组，具体效果如下图所示

此篇幅比较长，涉及到的小知识点也比较多，一定要耐心看完，记住学东西没有耐心可不行！！！

一、添加和修改

注：添加和编辑用到了同一个组件，也就是此篇文章你能学会如何封装组件及引用组件；第二能学会async和await；第三父向子传递数据props和子向父传递数据$emit()；

1添加数据

（1）请求地址：/article/category利用post传递数据

（2）编写api：注意add的url地址用的 反单引号，可以在url后面进行组合数据，这个知识点在编辑和删除你会看到详细的解释。

（3）编写方法

首先新建一个组件，里面的代码同样是从elementUI中复制过来的表单，下面会根据详细步骤解析elementUI标签中属性的意思。

在category/indexvue中进行引用，注意组件要首字母大写，不是必须的，但是最好规范一些。

引用完毕之后进行修改editvue组件：解析：:title动态绑定的title名称；:visiblesync布尔类型，控制模态框的显示与否；:before-close是一个方法，关闭模态框；:rules表单验证；ref=相当于id=；:model表单的数据；prop=关闭模态框时清除数据要用到，这个在elementUI中有解释，自己去看文档；v-model绑定的具体数值；:label绑定的数据，要做默认选中效果；@click执行的方法

由于是父组件向子组件传递数据，所以在子组件中要用props进行接收，然后在上面进行动态绑定；注意：所有接受的变量要定义type和default，声明类型和默认值；此处小知识点，子组件向父组件传递值用$emit();

表单验证：在子组件中返回rules，也就是开头:rules="rules"；注意：这里的rules是个object，里面需要验证的字段是个array，数组中每个value都是object，详细的验证方法在elementUI中有体现，自己去看。

此处定义的handleClose、onSubmit、submit方法；注意：在submit中有编辑和添加方法，用的同一个，所以有if判断；this$refs['form']resetFields()相当于jquey中$('#form')resetFields()清空数据；async、await和promise区别，自己去百度，这里只说明async和await是es6新语法，相当于apiadd(thisformData)then((res) => {//TODO})；这里可能有同学会有疑问，thiscloseForm()这个方法在哪？他是父组件传递过来的Funciton，在下文中会解释到。

开始 *** 作父组件indexvue，在data中返回edit对象，然后把里面的值绑定到 组件标签中；解析：title就是title；visible是否显示模态框；formData传递过去的数据，由于是添加功能，所以formData是空的，编辑就需要传递了；closeForm传递一个方法，用来关闭模态框

到这里，添加功能就已经实现了，仔细去看我上面的截图，一定要注意我说的点，如果你比着写发现不对，一定要仔细对比。当对比不出来的时候，留言告诉我。

2修改数据

（1）请求地址：/article/category/{id} 查询数据用get，这里的请求类型用的是restful请求方式，restful包含：get、post、put、patch、delete；/article/category 修改数据用put

（2）编写api：由于修改需要先查到数据，然后再进行传递和渲染，所以在api中有一个查询数据方法，也就是getById()

（3）编写方法

在indexvue父组件中编辑方法为handleEdit()，同样这里用到了async和await，然后先请求到了当前id返回的值，然后传递到editvue子组件中。

这里的if判断，判断传递过来的formData的id值是否为空，有值说明是编辑，无值说明是添加。if判断就在这里进行的体现价值，因为我们添加和编辑用的同一个组件，所以if显得至关重要。

仔细去看代码，去理解我的思路，为什么某些地方是这样写而不是那样写，一定要注意。哪里有看不明白的一定要留言进行讨论，我看到会第一时间回复。最终的效果：

二、删除

（1）请求地址：/article/category/{id} 删除用的是delete请求类型

（2）编写api：再强调一遍，url用的反单引号

（3）编写方法：因为删除用不到子组件了，所以删除都在indexvue中进行的

这里用到了elementUI中的$confirm方法，去文档中复制使用即可，方法的话就不再详细解释了，前面几篇文章已经解释过了。apidelete(id)then((res) => {//TODO})

最终效果：点击删除，显示提示，传递id进行删除。

elementui对于checkbox的应用也是非常广泛的，checkbox一般都是以集合的形式出现。

而你的checkbox也有很大的程度是绑定在你的列表里面。例如这样：
而在elementui中的checkbox绑定的是label的值，但是一般情况下，我们希望绑定的是id。显示的是name

因为我们的label绑定id的话，在进行增删改查 *** 作的时候，我们只需要在你的checkbox-group上面绑定一个 Array。即可获取你所有选中项的id。

有一种情况出现了：

只需要这么写就可以了：
你的label绑定id，然后中间绑定你的name。。

并不需要修改源文件。

你的脸是不是又方了？

v-model
预期：随着表单控件类型不同而不同。
限制：

修饰符：

使用方法：
在表单控件或者组件上创建双向绑定。细节请看下面的教程链接。

参考：

使用的地方：

双向绑定的实质：

这不过是以下示例的语法糖：

所以在组件中使用时，它相当于下面的简写：

所以要让组件的 v-model 生效，它应该 (从 220 起是可配置的)：

我们来看一个非常简单的货币输入的自定义控件：

5自定义组件的 v-model

默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突：

当使用v-model和value一起实现复选框时，多个勾选框都绑定到同一数据类型的数据上，vue的值如果出现在数组当中，就会选中这一项。同时，这个过程的绑定过程也是双向的，在勾选时，value的值也会自动push到这个数组中。

运行结果：

---