Vue-strap單選按鈕不能與vue.js一起使用

Question

我的web應用程序中有一些單選按鈕，我用vue.js創建，但所有的都很好地工作，但是當我決定使用它的單選按鈕的引導樣式時，向上。我意識到我必須使用vue-strap來進行數據綁定，才能在vue.js中正確引導樣式的單選按鈕，但是我仍然無法像以前那樣使用它。

這裏是我有什麼之前：

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

這工作得很好，讓我通過連接類型（取決於單選按鈕值當我將一個文件放入我的dropzone時，我的路由被選中）。不過，我想使用單選按鈕的引導樣式。

我現在有這個使用VUE錶帶：

<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錶帶）

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, 

這只是分配接觸連接到選中的值，並不會更改動態不再選擇不同的單選按鈕值。我注意到它不再使用V模型，而是這個<radio-group :value.sync="contactConnection"

我該如何做到這一點，使contactConnection值動態改變之前，我用vue-strap？

Answer 1

這是我最後還是沒解決我的問題，以上這些是創建單選按鈕組元素VUE自定義指令。

感謝jorgefernando1尋求答案！

鏈接到論壇，回答：http://forum.vuejs.org/topic/135/problem-binding-bootstrap-styled-radio-button-groups-with-vue-vm/3

Answer 2

我刪除數據切換=「按鈕」並設置這種風格在我的組件和它的工作：

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