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

Posted 2023-02-22

【中文标题】Vuetify：复选框在未选中时显示状态已选中，反之亦然

【英文标题】：Vuetify: checkbox shows status is checked when it is unchecked, and vice versa

【发布时间】：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

【参考方案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')