Vuetify: The checkbox displays the opposite status of whether it is checked or unchecked

Question

Vuetify: The checkbox displays the opposite status of whether it is checked or unchecked

Can you help me simplify this problem:

In my Vue.js template using Vuetify components, there is a checkbox present:

<v-checkbox 
   v-model="selected" 
   label="John"
   value="John"
   id ="john" 
   @click.native="checkit">
</v-checkbox>

The code for the checkit() method is as follows:

checkit: function() {
  let elt = document.getElementById('john')
  if(elt.checked) {
    console.log('checked')
  } else {
    console.log('unchecked')
  }
}

However, the result I am getting is opposite - it shows unchecked when checked and vice versa.

What could be causing this issue and how can it be resolved?

View Codepen demo

javascript vue.js vuetify.js nuxt.js

Answer 1

Answer №1

Before checking or unchecking the checkbox, the console.log is triggered. Here's what occurs:

The user clicks on the checkbox
The Javascript listener is executed
If none of the listeners cancel the event, the checkbox is set as checked or unchecked.

To handle this, it's better to listen for the change event: https://codepen.io/anon/pen/VGOMPB?editors=1011

Another issue is relying on document.getElementById('john') to check the checkbox status. Why not use the selected property instead? The DOM is updated after JS execution to prevent frequent refreshes. To wait for the DOM update, you can utilize the $nextTick helper: 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')
}

Answer 2

Before checking or unchecking the checkbox, the console.log is triggered. Here's what occurs:

The user clicks on the checkbox
The Javascript listener is executed
If none of the listeners cancel the event, the checkbox is set as checked or unchecked.

To handle this, it's better to listen for the change event: https://codepen.io/anon/pen/VGOMPB?editors=1011

Another issue is relying on document.getElementById('john') to check the checkbox status. Why not use the selected property instead? The DOM is updated after JS execution to prevent frequent refreshes. To wait for the DOM update, you can utilize the $nextTick helper: 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: The checkbox displays the opposite status of whether it is checked or unchecked

Answer №1

Similar questions

Is there a way to display these panels in a scrollable table layout?

React Resize Detection: Handling Window Resize Events

When the open button is clicked, the Div will toggle between open and closed states

Attempting to employ the .reduce method on an object

How can I use ngx-editor to insert an HTML block at the current cursor position by clicking a button?

Unpredictable preset inline styles for HTML input elements

What are the steps for defining the maximum and minimum values in AngularJS?

Verifying dynamic number inputs generated using JavaScript values and calculating the total with a MutationObserver

Addressing component validation conflicts in Vuelidate on VUE 3

The form within the while loop is only functioning with the initial result

Tips for generating a unique user validation hash or token

I am interested in extracting information from the Firebase real-time database and showcasing it on my HTML webpage

Creating a legitimate svg element using javascript

Inquirer doesn't waste time lingering for user input following a prompt

Use a string as the model name to dynamically bind v-model within a v-for loop

Exploring the Safari browser with Polymer 2.0

Failed to make a request to https://registry.npmjs.org/node-modules because of an error: error:0906D06C:PEM routines:PEM_read_bio:no start line

Switch up the Thumbnail Image based on the selected category

Enhancing the visual appeal of a standard jQuery slider with thumbnails

Is there a way for me to keep an image stationary on the page while allowing overlaying text to move?