使用 VueJS 2 在引导开关上触发事件答案

【问题标题】：trigger event on a bootstrap switch with VueJS 2使用 VueJS 2 在引导开关上触发事件
【发布时间】：2018-03-17 19:51:08
【问题描述】：

我处理的是boostrap switch

在 JQuery 中，这很简单，你可以像 doc 状态那样做：

  $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', function(event, state) {
    console.log(this); // DOM element
    console.log(event); // jQuery event
    console.log(state); // true | false
});

但在 VueJS 中，我无法将元素绑定到值：

<div id="vue-instance">
  <input type="checkbox" name="my-checkbox" checked @click="log">
</div>

var vm = new Vue({
  el: '#vue-instance',
  data: {

  },
  methods:{
      log(){
          alert('ok');
      }
  },
  mounted(){
    $("[name='my-checkbox']").bootstrapSwitch();

  }
});

这里是小提琴：https://jsfiddle.net/xoco70/tfkLkLqw/1/

【问题讨论】：

标签： javascript jquery twitter-bootstrap vue.js

【解决方案1】：

如果你真的需要使用它，你可以简单地绑定到 mounted 生命周期钩子上的更改。

var vm = new Vue({
  el: '#vue-instance',
  data: {

  },
  methods:{
      log(event, state){
          alert('ok');
      }
  },
  mounted(){
    $("[name='my-checkbox']").bootstrapSwitch();
    $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', this.log.bind(this));
  }
});

我说如果你真的需要使用它，因为你将Vue.js 的数据驱动方法与JQuery 查询视图混合在一起。我还尝试提出一个解决方案，您可以使用 Vue 绑定，以便您可以对模型中的事件或更改做出反应，但似乎库在切换切换时不会更新 html 输入的值。

工作示例

var vm = new Vue({
  el: '#vue-instance',
  data: {
    bSwitch: null
  },
  methods:{
      log(event, state){
          this.bSwitch = state;
          console.log('switch to state ' + state );
      }
  },
  mounted(){
  	$("[name='my-checkbox']").bootstrapSwitch();
    $('input[name="my-checkbox"]').on('switchChange.bootstrapSwitch', this.log.bind(this));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-switch@3.3.4/dist/js/bootstrap-switch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-switch@3.3.4/dist/css/bootstrap3/bootstrap-switch.css" rel="stylesheet"/>

<div id="vue-instance">
  Switch State: {{bSwitch}}
  <br>
  <input type="checkbox" name="my-checkbox">
</div>

【讨论】：