代码之家 › 专栏 › 技术社区 › Billal Begueradj

Vuetify:checkbox显示取消选中时的状态,反之亦然

nuxt nuxt.js vuetify.js vue.js javascript

1

Billal Begueradj · 技术社区 · 6 年前

我的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 回复 | 直到 6 年前

1

8

Hammerbot 6 年前

用户单击复选框
Javascript执行侦听器

你能用的就是听电视 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?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')
}