单击复选框时,它显示为false

时间:2018-10-02 08:19:59

标签: vue.js vuejs2

<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的链接。请检查控制台值并查看值

2 个答案:

答案 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)。