javascript - Vue-strap 单选按钮不适用于 vue.js

Question

我在使用 vue.js 创建的 Web 应用程序中有一些单选按钮，它们都运行良好，但是当我决定使用 Bootstrap 样式的单选按钮时，它有点困惑。我意识到我必须使用 vue-strap 进行数据绑定(bind)才能使 vue.js 中的 Bootstrap 样式单选按钮正常工作，但是我似乎仍然无法像以前那样正常工作。

这是我之前的:

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

当我将文件放入拖放区时，这工作正常并允许我将连接类型(取决于选择的单选按钮值)传递到我的路由。但是我想使用单选按钮的 Bootstrap 样式。

我现在使用 vue-strap 有了这个:

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

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,

这只是将 contactConnection 分配给选中的值，并且在选择不同的单选按钮值时不再动态更改。我注意到它不再使用 v-model 而是这个 <radio-group :value.sync="contactConnection"

我怎样才能让 contactConnection 值像我使用 vue-strap 之前那样动态变化？

Answer 1

我删除了 data-toggle="buttons" 并在我的组件中设置了这个样式，它起作用了:

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