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

Question

我在使用 vue.js 创建的 Web 应用程序中有一些单选按钮，它们都运行良好，但是当我决定使用 bootstrap 风格的单选按钮时，它有点混乱。我意识到我必须使用 vue-strap 进行数据绑定才能使 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

这就是我最后为解决上述问题所做的工作，即在 vue 中为无线电组元素创建一个自定义指令。

答案归功于 jorgefernando1！

Link 到论坛回答：http://forum.vuejs.org/topic/135/problem-binding-bootstrap-styled-radio-button-groups-with-vue-vm/3

Answer 2

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

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

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

Vue-strap Radio Buttons not working with vue.js

javascript

twitter-bootstrap

dropzone.js

vue.js