vue 绑定checkbox获取状态

Question

有这么一个

选中状态

未选中状态

html代码：
<input class="mui-switch mui-switch-anim" type="checkbox" v-model="item.state" v-on:click="alocked(item)" />

vue:

new VUE({
    ...,
    data:{
        items:{...}    <==  包含一个"state"对象
    }
    methods:{
        alocked:function(item){
        var i2 = item;
        console.log(i2);
        }
    }
})

切换状态的时候网页上显示的是“true” ,console.log 却是上一次的状态：“flase”,
再切换显示的是“flase”, console.log 也是上一次的"true",
就是应该点击切换的时候没有更新状态~求教什么那么的问题~要怎么更新这个状态?

Answer 1

修正：

来，这么玩儿：jsfiddle

为方便阅读，代码给你列出来吧：

<div class='container' id="app">
    <div v-for="item of items">
        <input type="checkbox" v-model="item.state" v-on:click="alocked(item)" />
        status: {{ item.state }}
    </div>
</div>

var amount = new Vue({
    el: '#app',
    data: function(){
        return {
          items: [{
              state: false
          },{
              state: true
          }]
      };
    },
    methods: {
        alocked: function (item) {
            item.state = !item.state;
        }
    }
});

同志，举一反三的能力一定要有啊，不能刚看见书里画了个黑马，回头再看见个白马就不认识了，这是不可取的哦!

Answer 2

先执行了click函数，此时状态并没有改变哦，click执行完后checkbox才被选中了，所以会出现click函数是最初的状态，而界面是响应用户操作后的状态

Answer 3

遇到和你一样问题，一种是楼上说的直接手动修改状态。不过我用的是

setTimeout(function(){
    //执行代码
}, 50);

还有另一种，不要用@click，改为使用@change，@change就代表控件变化后再执行了！

Answer 4

移动端 直接使用@touchend