v-model for checkbox


Topic: v-model for checkbox

vadim0426 asked 5 years ago

Hi,

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 premium commented 5 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 commented 5 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 premium commented 5 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.

FREE CONSULTATION

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

Status

Open

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