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 demo

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

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

1 个答案: