Vue v-model 数据绑定问题答案

【问题标题】：Vue v-model data binding issueVue v-model 数据绑定问题
【发布时间】：2018-11-02 10:11:59
【问题描述】：

我有一对标准的 Bootstrap 单选按钮，我希望 v-model 在选中一个时在 vue 数据对象中设置一个值。

这在JSfiddle 中工作得很好，但是在我自己的环境中本地运行时这不起作用。

我可以让其他指令正常工作，例如“v-if”，但 v-model 似乎根本不起作用。

控制台中什么也没有出现，当使用 vue 开发工具扩展时； I can see that the 'test' object is never updated when one of the radio buttons is selected.

我用的是最新版的bootstrap、jquery和vue开发版。

<div class="container margin-top-rem" id="app">       
        <div class="row">
            <div class="col-12">
                <div class="card text-center" v-if="testIf">
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active card-body-padding">
                            <div class="row">
                                <div class="col-12">
                                    <div class="form-group">
                                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                            <label class="btn btn-secondary">
                                                <input type="radio" name="options" autocomplete="off" v-model="testVModel" :value="false" />false
                                            </label>
                                            <label class="btn btn-secondary">
                                                <input type="radio" name="options" autocomplete="off" v-model="testVModel" :value="true" />true
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>test value is {{testVModel}}</div>
            </div>
        </div>
    </div>
 var app = new Vue({
   el: '#app',
   data: {
     testIf: 'blah',
     testVModel: ''
   }
 })

【问题讨论】：

标签： vue.js bootstrap-4 vue-directives

【解决方案1】：

看来这是bootstrap和Vue之间的冲突。

两个解决方案是：

1) 使用 Bootstrap-vue

2) 删除 'data-toggle="buttons"' 来自：

<div class="btn-group-toggle" data-toggle="buttons">

【讨论】：