0

I'm making my first script using Vue, and I think I love it ;)

I have a problem with the bootstrap switch: http://www.bootstrap-switch.org/

It never triggers the v-on:change on this component:

Here is my generated code

<div class="checkbox-switch">
     <label>
     <input name="isTeam" type="hidden" value="0" id="isTeam">
     <input v-model="isTeam" v-on:change="getCategoryName" class="switch" data-on-text="Si" data-off-text="No" name="isTeam" type="checkbox" value="1" id="isTeam">
     </label>
</div>

On all others fields, v-on:change works fine!

Any Idea how to trigger it???

Juliatzin
  • 18,455
  • 40
  • 166
  • 325

2 Answers2

1

Googling about vuejs and bootstrap-switch integration I found this topic. My solution to resolve it was use of boostrapSwitch event:

var app = new Vue({
  el: '#app',
  data: {
    isTeam: true
  }
})


$('#isTeam')
  .bootstrapSwitch()
  .on('switchChange.bootstrapSwitch', function(event, state) {
    app.isTeam = state;
    //app.getCategoryName();
  });
<div id="app">

  <div class="checkbox-switch">
    <label>
      <input id="isTeam" class="switch" data-on-text="Si" data-off-text="No" name="isTeam" type="checkbox" v-model="isTeam">
    </label>
  </div>

  is team: {{ isTeam }}
  
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css">
rogeriolino
  • 1,095
  • 11
  • 21
0

Bootstrap Switch uses it's own events: http://www.bootstrap-switch.org/events.html

Unfortunately you cannot have camelCase HTML attributes so you are not able to use it with v-on: syntax right now. Actually there is a discussion about this matter right now: https://github.com/vuejs/vue/issues/2669

bartlomieju
  • 418
  • 3
  • 4