Question

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

Answer 1

因为控制台会在实际更改发生之前对其进行记录，例如，如果将console.log()更改为alert()，则可以清楚地看到时间顺序以及首先执行的操作。

编辑：您可以在选中的对象上设置观察者，这样只要值实际更改，您就可以执行操作

watch: {
    checked: function (val) {
       console.log(val)
    },

Answer 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）。

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

2 个答案: