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

【问题标题】：Vuetify: checkbox shows status is checked when it is unchecked, and vice versaVuetify：复选框在未选中时显示状态已选中，反之亦然
【发布时间】：2019-02-28 02:56:33
【问题描述】：

让我把问题简单化一下：

我的 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 demo

【问题讨论】：

标签： javascript vue.js vuetify.js nuxt.js

【解决方案1】：

您得到的console.log 在选中或取消选中复选框的操作之前被触发。所以这就是发生的事情：

用户点击复选框
Javascript 执行监听器
如果事件没有在任何监听器中取消，它会继续并将复选框设置为选中或未选中。

您可以使用监听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')
}

【讨论】：