0

我正在使用 Vue 制作我的第一个脚本，我想我喜欢它；）

我的引导开关有问题：http: //www.bootstrap-switch.org/

它永远不会触发此组件上的 v-on:change：

这是我生成的代码

<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>

在所有其他领域， v-on:change 工作正常！

任何想法如何触发它？？？

4

2 回答 2

1

谷歌搜索 vuejs 和 bootstrap-switch 集成我发现了这个主题。我的解决方案是使用 boostrapSwitch 事件：

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">

于 2016-11-29T20:38:44.170 回答
0

Bootstrap Switch 使用它自己的事件： http: //www.bootstrap-switch.org/events.html

不幸的是，您不能拥有 camelCase HTML 属性，因此您现在无法通过v-on:语法使用它。其实现在有一个关于这个问题的讨论：https ://github.com/vuejs/vue/issues/2669

于 2016-04-15T16:47:38.213 回答