觸發事件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>