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匹配，变成选中状态。真的是厉害了。不知道这样解释，会不会有问题，欢迎交流。

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

---

——好记性不如难笔头。