Vue v-model 数据绑定问题
Vue v-model data binding issue
我有一对标准的 Bootstrap 单选按钮,我希望 v-model 在选中一个时在 vue 数据对象中设置一个值。
这在 JSfiddle 中工作得很好,但是当 运行 在我自己的本地环境中时这不起作用。
我可以让其他指令像 'v-if' 一样正常工作,但 v-model 似乎根本不起作用。
控制台和使用 vue 开发工具扩展时没有任何反应;我可以看到 'test' 对象在选择其中一个单选按钮时永远不会更新。
我用的是最新版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: ''
}
})
看来这是bootstrap和Vue之间的冲突。
要解决的两个选项是:
1) 使用Bootstrap-vue
2) 从以下位置删除 'data-toggle="buttons"':
<div class="btn-group-toggle" data-toggle="buttons">
我有一对标准的 Bootstrap 单选按钮,我希望 v-model 在选中一个时在 vue 数据对象中设置一个值。
这在 JSfiddle 中工作得很好,但是当 运行 在我自己的本地环境中时这不起作用。
我可以让其他指令像 'v-if' 一样正常工作,但 v-model 似乎根本不起作用。
控制台和使用 vue 开发工具扩展时没有任何反应;我可以看到 'test' 对象在选择其中一个单选按钮时永远不会更新。
我用的是最新版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: ''
}
})
看来这是bootstrap和Vue之间的冲突。
要解决的两个选项是:
1) 使用Bootstrap-vue
2) 从以下位置删除 'data-toggle="buttons"':
<div class="btn-group-toggle" data-toggle="buttons">