Question

我正在使用Vue创建我的第一个脚本，我想我喜欢它;）

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

它永远不会触发v-on：更改此组件：

这是我生成的代码

<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工作正常！

任何想法如何触发它？

Answer 1

关于vuejs和bootstrap-switch集成的Google搜索我找到了这个主题。我解决它的解决方案是使用boostrapSwitch事件：

＆＃13;

var app = new Vue({
  el: '#app',
  data: {
    isTeam: true
  }
})


$('#isTeam')
  .bootstrapSwitch()
  .on('switchChange.bootstrapSwitch', function(event, state) {
    app.isTeam = state;
    //app.getCategoryName();
  });

＆＃13;

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

＆＃13;

Answer 2

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

很遗憾，您无法拥有camelCase HTML属性，因此您现在无法使用v-on:语法。实际上现在正在讨论这个问题：https://github.com/vuejs/vue/issues/2669

触发v-on：使用Bootstrap开关进行更改

2 个答案: