使用label修改input的checkbox样式时会发生的问题

<div @click="clickall()" v-show="isEdit" class="checkallwrap">
      <input id="checkinput" @click.stop type="checkbox" v-model="checkall">
      <label for="checkinput"></label><span  class="checkall">全选</span>
</div>

利用label标签的for绑定input 来实现修改checkbox的样式

       input{
                display:none;
            }
            input:checked + label{
                background:#7882f3;
                border-color: #7882f3;
                &::after{
                    position:absolute;
                    height:16px;
                    top:0;
                    left:0;
                    bottom:0;
                    right:0;
                    margin:auto;
                    display: block;
                    content: "\2714";
                    text-align: center;
                    line-height:16px;
                    font-size: 16px;
                    color: white;
                }
            }
            label{
                position:absolute;
                left:-30px;
                top:0;
                bottom:0;
                margin:auto;
                display:block;
                width:14px;
                height:14px;
                border-radius: 2px;
                border: solid 2px #7882f3;
            }

当为input外层的div绑定单击响应函数时会出现函数执行两次的问题，

        clickall(){
            this.checkall=!this.checkall
                for(let i=0;i<this.arr.length;i++){
                    this.arr[i].ischeck=this.checkall;
                }
        },

此时this.checkall的值就会发生预期之外的变化。

查阅资料后发现问题在于使用label绑定input框之后，input的点击事件会冒泡到label上，则便执行了两次函数。

解决此问题则是需要阻止input的默认冒泡行为。

使用vue编写代码时则在input属性加上 @click.stop  即可