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

Question

让我简化一下问题：

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

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

checkit() 方法的代码如下:

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

但我得到了相反的结果：当它被选中时，它显示为未选中，反之亦然。

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

Codepen演示

- Billal Begueradj

Answer 1

当你获得的console.log触发在检查或取消复选框之前。所以具体情况如下:

1. 用户点击复选框
2. Javascript执行监听器
3. 如果事件在任何监听器中未被取消，则继续设置复选框为已选或未选状态。

你可以使用的是change事件监听：https://codepen.io/anon/pen/VGOMPB?editors=1011

第二个问题是，通过使用document.getElementById('john')你依赖于DOM来检查复选框是否选中。为什么不依赖于selected属性？DOM在所有JS被执行后更新，以避免过于频繁地刷新DOM。如果您想等待DOM更新，请使用$nextTick助手：https://codepen.io/anon/pen/BOewpg?editors=1011

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')
}

- Hammerbot