bootstrap-vue checkbox prevent change if certain condition is met

Question

I am using the bootstrap-vue package and have a checkbox as follows:

<b-form-checkbox v-model="isSelected"switch></b-form-checkbox>

i have data property

data(){
    isSelected: false
}

what i would like to do is for user to click the checkbox and before the checked value is changed is to perform some sort of validation by calling a method. The method may then prevent the value being changed.

How can i do this?

I have tried to bind method to the @change event but then when i try to set this.isSelected = false the checkbox value is still checked.

Francisco Rodeño Sanchez · Accepted Answer · 2021-08-09 16:46:37Z

8

I finally achieved it using @click.native.prevent

edited Aug 9, 2021 at 16:46

answered Mar 30, 2021 at 16:19

Francisco Rodeño Sanchez

7371 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

skirtle · Accepted Answer · 2019-07-24 23:58:24Z

b-form-checkbox has internal state for whether or not it is checked. It does get synced with the prop but it's via a watch so it'll only update when the prop value changes. In your case you're trying to prevent it changing, so the watch won't trigger.

You may want to consider disabling the checkbox instead.

To get this to work without disabling the checkbox you'd need to ensure the checkbox's watch gets triggered. For that we need to let the original change happen, allow it to update the prop, then change it back to the value we want.

The example below uses async/await but you could do it using a callback passed to $nextTick if you prefer.

new Vue({
  el: '#app',
  
  data () {
    return {
      isSelected: false
    }
  },
  
  methods: {
    async onInput () {
      await this.$nextTick()
      this.isSelected = false
    }
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-form-checkbox v-model="isSelected" @input="onInput"></b-form-checkbox>
</div>

I've used the input event but change would work too.

Collectives™ on Stack Overflow

bootstrap-vue checkbox prevent change if certain condition is met

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related