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

【问题标题】：Vue-strap Radio Buttons not working with vue.jsVue-strap 单选按钮不适用于 vue.js
【发布时间】：2016-07-09 06:14:36
【问题描述】：

我的 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-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之前那样动态变化？

【问题讨论】：

stackoverflow.com/questions/30317032/…

标签： javascript twitter-bootstrap dropzone.js vue.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

感谢 jorgefernando1 的答案！

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

【讨论】：