vue项目input标签checkbox,change和click绑定事件的区别

glorydx

我们经常在vue开发项目的过程中,遇到需要对input框使用v-modal的这种情况,在有的时候,不光需要双向数据绑定,还需要在改变数据之后绑定其它的操作,那么问题来了,你是使用@change绑定事件还是使用@click绑定事件

建议不要通过click绑定事件,对待input标签,最好通过change来触发,本人血的教训。

<input @change="inputchecked" class="goods-checked" 
v-model="shopcargoods[index].checked" type="checkbox" >
  • 1
  • 2

click执行的时间要早于change执行的时间,因为v-modal的时间是一个异步的。
当点击之后,v-modal可能还没有来得及将绑定在data里面的数据改变,click绑定的事件就执行了,这会导致click绑定事件里面拿到的data数据不是最新的。

change绑定的事件是一定要等到input框的value值改变之后才会被触发。
关于这一系列的顺序我是这样理解

点击input框–> click事件生效 --> v-modal改变绑定的data数据 --> 渲染到页面上改变input的value值 --> change事件生效

Logo

前往低代码交流专区

更多推荐