Vue在使用原生Html的复选框点击改变事件用V-model绑定的值问题

如题：有些项目中会用到复选框但是可能样式问题或者其他问题不得不自己写一个为了完成任务的复选框，我是因为在Vux框架中无法找到类似的复选框按钮，或者相似的但是在布局方面有点不好设计，不好显示，以至于自己模仿写一个实现功能的复选框

我的任务是写一个购物车的功能

我是需要点击每一项的复选框然后把对应的该行的内容存在一个数组中，在数组中能够拿到对应的值用于删除或者计算价格等操作。其实只是拿原生组件来就可以有这个效果的，但是还需要一点复选框的属性来完成该功能。首先就是需要绑定的数组对象，用于点击后该数组添加对应的信息。这里用的是Vue然后可以直接用v-model来绑定数组

 

开始：这个选项框的样式设计和绑定的一些属性！:value是在循环的时候把设置每一项表单值，@change是一个选项框变化方法

v-model 是绑定的数组

<div class="select_one">
	<input type="checkbox" style="width: 30px; height: 30px;" :value="item"  @change="zha"  v-model="checkedNames">
</div>

然后就基本大功告成了。

在点击的时候能够把对应的数据存入数组，便于后面操作。

在这里不能够用@click这个点击事件，会出现一个问题就是在第一次点击的时候数组为空，第二次点击是显示上一次显示的对象。就会慢半拍。

就像这样，然后可以使用settimeout来解决这个问题，我个人理解就是执行的顺序问题，在点击事件执行的时候，绑定的值还没有完成绑定，然后就执行完了点击事件方法，后面把值绑定好了之后就只能在下一次的点击事件中显示了。所有这里需要注意一点。 

任务完成，继续玩代码去咯。

写的不好或者哪里不对欢迎指出哦！！菜鸟一枚，希望大家共同学习，进步。