时间戳

首页 > 解决方案 > Vuetify：复选框在未选中时显示状态已选中，反之亦然

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

问题描述

让我简化一下问题：

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

标签： javascriptvue.jsvuetify.jsnuxt.js

解决方案

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

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

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

第二件事是，通过使用document.getElementById('john')你依赖这里的 DOM 来检查复选框是否被选中。为什么不依赖selected房产？DOM 会在所有 JS 执行完毕后更新，以免刷新 DOM 过于频繁。如果要等待 DOM 更新，可以使用$nextTickhelper：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')
}

推荐阅读