<div id="app">
<h2>Todos:</h2>
<input type="checkbox" id="checkbox" v-model="checked" @click='toggle'>
{{checked}}
</div>
new Vue({
el: "#app",
data: {
checked: false,
},
methods: {
toggle: function(){
console.log(this.checked);
}
}
})
单击复选框时,控制台值显示为false,但在视图中将其打印为true。为什么控制台和视图中的值不同?
这是指向fiddle的链接。请检查控制台值并查看值
答案 0 :(得分:2)
因为控制台会在实际更改发生之前对其进行记录,例如,如果将console.log()
更改为alert()
,则可以清楚地看到时间顺序以及首先执行的操作。
编辑:您可以在选中的对象上设置观察者,这样只要值实际更改,您就可以执行操作
watch: {
checked: function (val) {
console.log(val)
},
答案 1 :(得分:2)
正如Badgy所述,确实存在执行上的延迟。问题是您尝试结合使用v-model
和@click
。在这种情况下,我建议编写一个v-model
的自定义版本,以便您更好地控制。
实际上,<input v-model="checked" />
只是<input :value="checked" @input="checked= $event.target.value">
的一种简单形式,因此,您可以这样做
<input type="checkbox" id="checkbox" :value="checked" @click='toggle'>
并像这样切换值
toggle: function(){
this.checked = !this.checked;
}
这是结果https://jsfiddle.net/dan_elision/7fx1kocp/的jsfiddle。这种方法的优点是您拥有更多的控制权,并且不需要使用观察程序,这是一个良好的习惯,它仅用于节省昂贵的操作(请参见documentation)。