Javascript Vuetify：复选框显示未选中状态时已选中，反之亦然

让我简化一下问题：

我的Vue.js模板中有一个复选框（使用Vuetify组件）：

但是我得到了相反的结果：当它被检查时，它说它是未检查的，反之亦然

这是什么原因造成的？如何解决

---

在选中或取消选中复选框之前，会触发您获得的console.log。因此，情况就是这样：

用户单击复选框

Javascript执行侦听器

如果未在任何侦听器中取消该事件，它将继续并将复选框设置为选中或未选中

您可以使用的是收听

change

事件：

第二件事是，通过使用

document.getElementById（'john'）

您依赖于这里的DOM来检查复选框是否被选中。为什么不依赖于所选的

属性？为了避免过于频繁地刷新DOM，在执行完所有JS后会更新DOM。如果要等待DOM更新，可以使用
$nextTick
帮助程序：

<v-checkbox 
   v-model="selected" 
   label="John"
   value="John"
   id ="john" 
   @click.native="checkit">
</v-checkbox> 

checkit: function() {
  let elt = document.getElementById('john')
  if(elt.checked) {
    console.log('checked')
  } else {
    console.log('unchecked')
  }
}

checkit: function () {
    this.$nextTick(() => {
        let elt = document.getElementById('john')
        if(elt.checked) {
            console.log('checked')
        } else {
            console.log('unchecked')
        }
    })

    //this.selected.push('Vuejs')
    //this.selected.push('Paris')
}