Vue-Band Radio-Tasten funktioniert nicht mit vue.js

Question

Ich habe einige Radio-Tasten in meiner Web-Anwendung, die ich mit vue.js erstellen, die alle gut funktionierte, aber als ich beschloss, Bootstraps Stil der Radio-Tasten zu verwenden es irgendwie mucked oben. Mir ist klar, dass ich Vue-Strap verwenden muss, damit die Datenbindung für bootstrap-gestylte Optionsfelder in vue.js korrekt funktioniert, aber ich kann immer noch nicht so gut funktionieren wie zuvor. Hier

ist, was ich hatte vor:

<div class="col-lg-6"> 
    <div class="form-group"> 
    <div class="radio"> 
    <label> 
     <input type="radio" value="Broker" checked="checked" required v-model="contactConnection"> Broker 
    </label> 
    </div> 
    <div class="radio"> 
    <label> 
    <input type="radio" value="Relationship Manager" required v-model="contactConnection"> Relationship Manager 
    </label> 
    </div> 
    </div> 
</div> 

JS (vue.js)

data: function() { 
     return { 
     contactConnection: '' 
     } 
    } 



    this.dropzoneDownload = new Dropzone("#dropzone-download", { 
      url: common.getDataHost() + "/mailmerge/doStuff?pc=" + self.contactConnection, 
      paramName: "file", 
      withCredentials: true, 
      maxFilesize: 5, // MB 
      maxFiles: 1, 
      addRemoveLinks: true, 
    } 

Das hat gut funktioniert und mir erlaubt, durch den Verbindungstyp übergeben (je nach Optionsfeld Wert ausgewählt) zu meiner Route, als ich eine Datei in meine Dropzone fallen ließ. Ich möchte jedoch den Bootstrap-Stil der Optionsfelder verwenden.

Ich habe jetzt diese mit vue-Gurt:

<radio-group :value.sync="contactConnection" type="primary"> 
         <radio value="Broker"checked>Broker</radio> 
         <radio value="Relationship Manager" >Relationship Manager</radio> 
    </radio-group> 

JS - Vue.js (vue-Gurt)

Vue.component('component-mailmerge-bulk', { 
    template: _template, 
    components: { 
     'radio-group': radioGroup, 
     'radio': radioBtn 
    },props: { 
     state: { 
      type: Object 
     } 
    }, 
    data: function() { 
     return { 
     contactConnection: '' 
     } 
    } 

this.dropzoneDownload = new Dropzone("#dropzone-download", { 
      url: common.getDataHost() + "/mailmerge/doStuff?pc=" + self.contactConnection, 
      paramName: "file", 
      withCredentials: true, 
      maxFilesize: 5, // MB 
      maxFiles: 1, 
      addRemoveLinks: true, 

Ordnet nur contactConnection zu dem geprüften Wert und ändert sich nicht dynamisch mehr auf den ausgewählten Radio-Button-Wert. Ich merke, dass es kein V-Modell mehr verwendet, sondern <radio-group :value.sync="contactConnection"

Wie kann ich es tun, so ändert sich der contactConnection Wert dynamisch wie früher, bevor ich Vue-Strap verwendet habe?

Answer 1

Dies ist, was ich am Ende hätte mein oben Problem zu beheben, die eine benutzerdefinierte Richtlinie in vue für das Funkgruppenelement zu schaffen.

Kredit geht an jorgefernando1 für die Antwort!

Link zum Forum mit Antwort: http://forum.vuejs.org/topic/135/problem-binding-bootstrap-styled-radio-button-groups-with-vue-vm/3

Answer 2

I entfernt Daten-Toggle = "Tasten" und setzen Sie diesen Stil in meiner Komponente und es funktioniert:

input[type=radio]{ 
    margin: 4px -8px 0; 
    visibility: hidden; 
}