Toggle checkbox programmatically


Topic: Toggle checkbox programmatically

Lmartinez asked 4 years ago

Expected behavior

Changing the v-model of a checkbox should toggle it (setting it to true with code should check it and vice-versa). Actual behavior

The checkbox doesn't get checked or unchecked even if it's v-model changes. Resources (screenshots, code snippets etc.)

    <template>
<mdb-input
            type="checkbox"
            label="Student"
            :checked="student"
            v-model="student"
            id='chexbox2'
/>
</template>
<script>
export default {
  data() {
    return {
        student: false
        }
    }
}
</script>

Magdalena Dembna staff premium answered 4 years ago

<mdb-input type="checkbox" id="check1" class="mb-2 pl-0" v-model="checkValue" checkboxValue="Checkbox" label="Checkbox" />
<mdb-btn size="md" @click="checkValue = !checkValue">Change value</mdb-btn>

data() {
    return {
      checkValue: true
    };
  },

Can you try this code above? I couldn't recreate your issue. Best 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

Answered

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