vue项目开发在使用CheckBox时遇到一个点击响应问题,归根结底就是复选框当前v-model的数据点击响应问题。直接结合代码来说:
Html部分:
<input type="checkbox" id="label" v-model=" isChoose " />
<label for="label" @click="clickAct">点击复选框</label>
js部分:
data:{
isChoose:false
},
methods:{
clickAct(){
if(…){
…
}else{
…
}
}
}
如上所述:我一开始点击事件用@click,逻辑修改之后终于调通了(此时用的谷歌浏览器),美滋滋,其他部分测试也没问题,发给客户,结果客户那边用的火狐浏览器,发现火狐里的响应逻辑和谷歌里的恰恰相反。一开始一度质疑自己逻辑代码写的有问题。于是开始查询相关资料,最后解决问题,再一次美滋滋。
言归正传:到底是哪里出了问题?这就要追溯到@click本身。
在vue官方文档里有这么一句话,“可以用v-on指令监听DOM事件,并在触发时运行一些JavaScript代码”,他的意思就是说,@click在点击的瞬间执行代码,而不是点击之后(我的逻辑就是根据点击之后的状态来执行的)。
那为什么谷歌click输出的是之后的值,火狐click输出的就是之前的值呐?鄙人不才,猜测是内核计算问题,导致响应的是不同结果。
如何解决:将@click换成@change就OK了。
关于@change官方文档是这样说的:“可以用v-on指令监听DOM事件,并在状态改变之后运行一些JavaScript代码”,也看到了,是状态改变之后执行逻辑代码,这个刚好和我写的逻辑不谋而合。
问题就这样解决了,美滋滋。
此次总结:
①、网页测试部分需要全面(谷歌、火狐、IE各来一遍),早点发现早点解决,在提交给客户之前将如上的这种低等问题扼杀。
②、官方文档也是书,每次阅读都要有新的收获。
③、遇到这个问题,静下心来写个小demo深入测试,很快就能解决问题。
④、做好该有的记录,万一项目跨度大,再次接触此问题忘了咋整。
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}