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

Huooo

——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:

傻逼的坑:

  • 我在处理的时候,由于环境没有现在这么简单,我的思路不清晰,所以我考虑的很烂,我竟然想着用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数据和value的双向性。一方向,选中的value值可以传到v-model进而形成一个数组,数组里面是已选中选项的value;一方向,拿到一个带有部分value的数组,通过v-model可以和value匹配,变成选中状态。真的是厉害了。不知道这样解释,会不会有问题,欢迎交流。

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


——好记性不如难笔头。

阅读 17.1k

Coding happily and friendly and elegantly.

328 声望
33 粉丝
0 条评论

Coding happily and friendly and elegantly.

328 声望
33 粉丝
文章目录
宣传栏