Question

我的网络应用程序中有一些单选按钮，我用vue.js创建，但都很好用，但是当我决定使用bootstraps样式的单选按钮时，它有些混乱。我意识到我必须使用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,
  }

这很好用，当我将文件放入我的dropzone时，允许我通过连接类型（取决于所选的单选按钮值）到我的路径。但是我想使用单选按钮的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;
}

Answer 2

这就是我最后修复上述问题的方法，即在vue中为无线电组元素创建自定义指令。

来自jorgefernando1获得答案！

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

Vue-strap单选按钮不能与vue.js

2 个答案: