触发事件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

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

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视图中的数据。我也试着想出一个解决方案，你可以使用一个绑定，所以你可以对模型中的事件或变化作出反应，但是当切换切换时，库似乎不更新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(){ 
 
    \t $("[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>