トリガーV-上：ブートストラップスイッチ

Question

変化私はVueのを使用して私の最初のスクリプトを作ってるんだ、と私はそれを愛すると思う;）

私は、ブートストラップスイッチに問題がある：http://www.bootstrap-switch.org/

それは決してV-上をトリガ：このコンポーネントの変更：

ここでは私の生成されたコード他のすべての分野で

<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-である：変更が正常に動作します！

どのようにトリガーするのですか？

Answer 1

ブートストラップ・スイッチは、それ自身のイベントを使用しています。

http://www.bootstrap-switch.org/events.htmlは、残念ながら、あなたはキャメルケースHTMLがそうあなたが今v-on:構文でそれを使用することができません属性を持つことができません。実際には、今この問題に関する議論があります。https://github.com/vuejs/vue/issues/2669

Answer 2

vuejsとブートストラップスイッチの統合に関するグーグル私はこのトピックを発見しました。私のソリューションは、それがboostrapSwitchイベントの使用だっ解決するために：

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    isTeam: true 
 
    } 
 
}) 
 

 

 
$('#isTeam') 
 
    .bootstrapSwitch() 
 
    .on('switchChange.bootstrapSwitch', function(event, state) { 
 
    app.isTeam = state; 
 
    //app.getCategoryName(); 
 
    });

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