v-model for checkbox

Topic: v-model for checkbox

vadim0426 free asked 2 years ago


The customer I am working for is premium member of the MDB. I have found the issue and tried to figured out what happened during half of the day.

I have added input:

<mdb-input type="checkbox" id="select_all" name="select_all" v-model="selectAll" />

And described variable I want to bind to this input in data section of my component:

 data () {
    return {
      selectAll: false

When I try to change the variable's value to true/false the checkbox becomes selected/unselected. That's fine. But after I already once clicked to checkbox the binding works in one way: I mean if I try to change the value of selectAll variable - the checkbox select/unselect doesn't work. It's very critical issue. Could you please help me to find out the way to fix it.

Best regards

Magdalena Dembna staff commented 2 years ago

Thank you for reporting this bug - we will try to find a way to fix it as soon as possible. Kind regards, Magdalena

vadim0426 free commented 2 years ago

Hi, I figured out how can temporarily resolve this issue. The problem is class binding I think. Element 'before' in label near checkbox reacts on v-model property changing until I will not click on the checkbox. Case for reproduce: after page loaded try to change reactive property bound to checkbox using VUE devtools - everything fine. Click on the checkbox to change state and try again to change reactive property using DEV tools - no effect. I have added computed property to checkbox - key, and change the values to re-renader checkbox.

Magdalena Dembna staff commented 2 years ago

Thank you for this insight, we have a task pending on our to-do list and it has a high priority for us. We will do our best to include it in the next release. Kind regards, Magdalena

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.8.0
  • Device: Desktop
  • Browser: Any
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No