Vue checkbox事件 方法中如何获取选中值？

Question

如题， vue checkbox 官方实例：

在selectNames方法中，选中 某个checkbox时，this.checkedNames为空，
取消选中，则this.checkedNames有值，请问这个该如何处理？ 因为正好相反了

Answer 1

贴上最后实现的方法，仅供参考！

后记： 看到vue作者尤大神在issue回复中有提到这个问题，
附上他的解决办法：http://jsfiddle.net/yyx990803/5sH6A/310/

同时发现这个问题，并不是所有的浏览器都是如此，只存在于高版本的Chrome 49和Firefox 41 以上。

Answer 2

我比较偷懒，使用的是setTimeout.

selectName: function(){
    var self = this;
    setTimeout(function(){
        alert(self.checkedNames)
    },0)
}

效果达到了，这个问题形成的原因是当点击checkbox时，先触发click事件。打印数据，然后，才把checbox的value值传给model，也就是传入checkedNames中。
使用setTimeout是用伪异步的方式去执行这段代码

参考代码：
问题描述表现 https://jsfiddle.net/g1v20upr...
解决方法示例 https://jsfiddle.net/g1v20upr...

Answer 3

不需要selectNames，有v-model就可以了 https://jsfiddle.net/chexian/g1v20upr/1/

如果你需要在 checkedNames 改变的时候处理其他业务逻辑，你可以 watch checkedNames

Answer 4

有兴趣可以看看鄙人写的这篇vue checkbox&&radio组件