有这么一个
选中状态
未选中状态
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",
就是应该点击切换的时候没有更新状态~求教什么那么的问题~要怎么更新这个状态?
修正:
来,这么玩儿: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;
}
}
});
同志,举一反三的能力一定要有啊,不能刚看见书里画了个黑马,回头再看见个白马就不认识了,这是不可取的哦!
遇到和你一样问题,一种是楼上说的直接手动修改状态。不过我用的是
setTimeout(function(){
//执行代码
}, 50);
还有另一种,不要用@click,改为使用@change,@change就代表控件变化后再执行了!
先执行了click函数,此时状态并没有改变哦,click执行完后checkbox才被选中了,所以会出现click函数是最初的状态,而界面是响应用户操作后的状态