使用VueJS 2

Question

我处理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/

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