rhyek/vue-bootstrap-toggle

Got 2 change event when use @input to detect change

Closed this issue · 3 comments

Hi :)

I like this wrapper that you made but I'm facing a problem at the moment. I bind the v-model with the is_manual field in the deodorant object (it's inside a loop).

<bootstrap-toggle v-model="deodorant.is_manual" :options="{ on: 'Yes', off: 'No' }" @input="updateIsManual"/>

Then I have updateIsManual method inside the method object

updateIsManual() { console.log('change'); }

What I expected here is, the code should print 'change' one time when I click on the toggle, but turn out it printed out 'change' 2 times (screenshot attached).

screenshot at nov 18 01-15-39

I'm not sure what's wrong here, I'm new to VueJS so maybe I've done something wrong :/ can you help please?

This appears to be in index.vue because of:

watch: {
    value(newValue) {
      this.$$el.bootstrapToggle(newValue ? 'on' : 'off')
    }
  }

This causes this.$emit('input', this.$$el.prop('checked')) to be called
twice, which causes your input event handler to be called twice.

I have a fork that fixes this, not sure if this repo is monitored and the PR will every be approved.

rhyek commented

Merged PR and published a new version.