Trigger-v-on: Wechsel mit Bootstrap-Schalter

Question

ich mein erstes Skript mit Vue zu machen, und ich glaube, ich liebe es,)

Ich habe ein Problem mit dem Bootstrap-Schalter: http://www.bootstrap-switch.org/

Es ist nie löst die v-on: Änderung auf dieser Komponente:

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

auf allen anderen

Hier meinen generierte Code ist Felder, v-on: Wechsel funktioniert gut!

Irgendeine Idee, wie man es auslöst ???

Answer 1

Bootstrap Switch verwendet seine eigene Veranstaltungen: http://www.bootstrap-switch.org/events.html

Leider kann man nicht haben camelcase HTML-Attribute, so dass Sie nicht in der Lage es mit v-on: Syntax jetzt zu verwenden. Eigentlich gibt es eine Diskussion über diese Angelegenheit im Moment: https://github.com/vuejs/vue/issues/2669

Answer 2

Googeln über Vuejs und Bootstrap-Switch-Integration Ich fand dieses Thema. Meine Lösung zu lösen ist, die Nutzung von boostrapSwitch Veranstaltung war:

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