vue通过v-model对checkbox的数据渲染与获取

——vue对v-model和checked属性的解析

---

前：

• 不知道副标题这样写，尤大会不会想直接拍死我，哈哈哈，但我还是感谢你。此处副标题有点夸大其词，真正的文章并没有涵盖那么广且深，只是我被坑的太心塞。

• Stack Overflow是个好地方，没事记得多逛逛，即使英语很烂，也不会耽误你看JavaScript语言，是的，JavaScript是我的真爱。

开发需求：

• 此处为目的清晰，需求被我缩小至checkbox，因为我只是栽在checkbox上面。

• 多选操作，且所有选项是数据库获取，同时默认选中的选项也是数据库获取，之后按照用户需求选取再提交。

• 

开发问题：

• 我当时在渲染已选中选项上走的弯路。

正确思路：

1. 数据存储

   • 先将所有选项存在变量this.options中。

   • 再将选中选项存在变量this.postOptions，因为，不管是前台拿后台数据区渲染已选中状态，还是前台最后提交传给后台的选中数据，它们都是已选中的选项，因此用同一个变量去接收。（然而天真的我，用了两个变量。Too young,too simple）

2. 数据渲染

   • 所有选项渲染，就是直接用v-for即可，不做陈述。

   • 已选中状态，可以用v-model，也可以用v-bind:checked。但是考虑到要处理提交的数据，且checked的渲染只能用boolean值渲染，因此选择用v-model。（然而傻逼的我，竟然两个都用了，呵呵哒）

3. OK，现在数据思路清晰之后，其实也就没什么了，主要看后台和你商量的数据格式。相信深爱JavaScript的我们都能解决，不行也没关系，反正也就是Object，String和Array之间的相爱相杀，就toString,join,split,JSON.stringify,JSON.parse，反正我是不懂就去查，哈哈哈哈哈

DEMO:

• CODEPEN-VUE-CHECKBOX-RENDER

傻逼的坑：

• 我在处理的时候，由于环境没有现在这么简单，我的思路不清晰，所以我考虑的很烂，我竟然想着用v-model接收用户的选中意图，用v-bind:checked去渲染已选中选项。然后顺着思路就用了两个变量，同时处理v-model和v-bind:checked。这种思路断不可以继续，因为两个数据本来就是一家，分开处理只会进坑，还不想跳出坑的样子。

• 幸亏我没在github上开issue，估计尤大想直接怼我，因为我没有温故官方文档，真是笑哭了。官方表明，v-model只是语法糖，尤其是在checkbox中，checked的状态就和v-model+value的作用等同。当然提倡v-model，是因为vue赋予了它双向监听的强大能力，且不是局限于boolean判断。

推荐知识:

• 官方文档—v-model

• segmentfault上面提出的v-model和checked相关问题

• stackoverflow上面提出的v-model相关问题

• segmentfault上面对于v-model是语法糖的解释

• 感谢他们。

后：

• 一定要好好想想v-model数据和value的双向性。一方向，选中的value值可以传到v-model进而形成一个数组，数组里面是已选中选项的value；一方向，拿到一个带有部分value的数组，通过v-model可以和value匹配，变成选中状态。真的是厉害了。不知道这样解释，会不会有问题，欢迎交流。

• 说实在的，各路大神对于我这种小白提的问题，可能只想甩一句，看官方文档。确实是这样。因为我在学习官方之后，就会觉得好像都知道了。但其实我尤大真的是厉害了，他在官方文档中有暗示，如果现在看不懂的地方，以后再看。哈哈哈哈哈

---

——好记性不如难笔头。