vue v-model 和 click

找了很久没找到答案,来这里求助了~~
背景:使用vue.js 来开发,用v-model来实现表单元素的双向绑定,在input标签上同事使用了click事件做一些特殊处理(需要操作绑定的值)。
代码如图:
clipboard.png
问题:这样写了之后,发现每次点击这个checkbox的时候,都会先去执行我自定义的fix函数,然后再去改变我v-model绑定的b的值,是不是本身vue的在vue实现这个操作的原理上就存在先执行click后操作v-model的优先级,如果存在,如何改变这种优先级。如果不存在,是不是我的写法或者什么地方存在问题,求赐教~~~~

阅读 5.9k
2 个回答

一般使用v-model绑定之后就不要自己去处理click了,其实你只是想再b变化的时候去做处理嘛,你可以看看vue的watch

或许你可以这么做
给checkbox绑定一个动态的checked,再在click事件中改变checked的控制变量达到相同的效果

    <div id='app'>
        <input type="checkbox" @click='fun(0)' :checked="checks[0]" name='check'>
        <input type="checkbox" @click='fun(1)' :checked="checks[1]" name='check'>
        {{checks}}
        <button @click='changeIpt'>改变checkbox状态</button>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                checks:[true,true]    
            },
            methods:{
                fun:function(index){
                    console.log(this.checks[index]);
                    this.$set(this.checks,index,!this.checks[index])
                    console.log(this.checks[index]);
                    console.log(index+' click, '+'then do something')
                },
                changeIpt:function(){
                    for(var i=0;i<this.checks.length;i++){
                        this.$set(this.checks,i,!this.checks[i])
                    }
                }
            }
        })
    </script>

当点击checkbox时,控制台输出

clipboard.png

会先改变控制变量的值,再执行相应函数,达到你的要求

当点击按钮时会反选。
这种办法不失办法,只不过略显麻烦,如果有更好的,还是选择其他方法吧

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题