javascript - vue v-model 和 click

Question

找了很久没找到答案，来这里求助了~~
背景：使用vue.js 来开发，用v-model来实现表单元素的双向绑定，在input标签上同事使用了click事件做一些特殊处理（需要操作绑定的值）。
代码如图：

问题：这样写了之后，发现每次点击这个checkbox的时候，都会先去执行我自定义的fix函数，然后再去改变我v-model绑定的b的值，是不是本身vue的在vue实现这个操作的原理上就存在先执行click后操作v-model的优先级，如果存在，如何改变这种优先级。如果不存在，是不是我的写法或者什么地方存在问题，求赐教~~~~

Answer 1

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

Answer 2

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

    <p 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>
    </p>
    <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时，控制台输出

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

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