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演示

Answer 1

在检查或取消选中复选框的操作之前触发您获得的console.log.所以这就是发生的事情:

1. 用户单击该复选框
2. Javascript执行监听器
3. 如果未在任何侦听器中取消事件,则会继续并将复选框设置为选中或取消选中.

您可以使用的是监听change活动:https://codepen.io/anon/pen/VGOMPB？editors = 1011

第二件事是,通过使用document.getElementById('john')你在这里依赖DOM来检查复选框是否被选中.你为什么不依赖这个selected房产？在执行完所有JS之后更新DOM,以避免过于频繁地刷新DOM.如果您想等待更新DOM,可以使用$nextTick帮助程序:https://codepen.io/anon/pen/BOewpg？ edit = 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')
}