javascript - vueJs 下拉多选框绑定无反应
本文介绍了javascript - vueJs 下拉多选框绑定无反应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 报表查询 </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script>
<style type="text/css">
body{
margin-left: 15%;
margin-right: 15%;
}
</style>
</head>
<div id="vueDemo1">
<div class="col-sm-2">
<label for="">本方机构类型</label>
<select id="selfEntityType" class="selectpicker show-tick form-control" multiple >
<option v-for="option in selfEntityTypeSelectArray" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
</div>
<br>
<button class="btn btn-primary btn-block" style="width: 200px;margin-left:80%" v-on:click="Search()">查询</button>
<script>
new Vue({
el: '#vueDemo1',
data: {
selfEntityTypeSelectArray:[
{ text: '基金', value: 'A' },
{ text: '商业公司', value: 'B' },
{ text: '银行', value: 'C' }
]
},
methods:{
Search:function()
{
this.selfEntityTypeSelectArray=[
{ text: '基金', value: 'A' },
{ text: '商业公司', value: 'B' }
];
alert(this.selfEntityTypeSelectArray.length);
}
}
})
</script>
</div>
</html>
刚开始学VueJs
1.使用了bootstrap的下拉多选框，点查询按钮后，下拉多选的下拉枚举值没有随着绑定好
2.替换为自带的select，就可以绑定成功。。。。
解决方案
bootstrap select 初始化之后，会将 select 变成下面这样的结构：
<div class="btn-group bootstrap-select show-tick form-control">
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="selfEntityType" title="Nothing selected" aria-expanded="false"><span class="filter-option pull-left">Nothing selected</span> <span class="bs-caret"><span class="caret"></span></span>
</button>
<div class="dropdown-menu open" style="max-height: 891px; overflow: hidden; min-height: 0px;">
<ul class="dropdown-menu inner" role="menu" style="max-height: 879px; overflow-y: auto; min-height: 0px;">
<li data-original-index="0"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">
基金
</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">
商业公司
</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
<li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">
银行
</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
</ul>
</div>
<select id="selfEntityType" class="selectpicker show-tick form-control" multiple="" tabindex="-98">
<option value="A">
基金
</option>
<option value="B">
商业公司
</option>
<option value="C">
银行
</option>
</select>
</div>原来的 select 被移到这个 div 里面，并且样式被设置为 display: none
修改数组会修改已被隐藏的 select，不能自动刷新 bootstrap select，需要调用 bootstrap select 的 selectpicker 的 refresh 方法，注意在 Vue.nextTick 中调用。
Search: function() {
this.selfEntityTypeSelectArray = [{
text: '基金',
value: 'A'
}, {
text: '商业公司',
value: 'B'
}];
Vue.nextTick(function () {
$('#selfEntityType').selectpicker('refresh');
});
}此外，如果是按组件的方式开发，不要使用 #id 选择子进行元素选择，可以使用 $el.querySelector 或者 ref 特殊属性（用于Vue.js 2.0），或者 v-el 指令。
这篇关于javascript - vueJs 下拉多选框绑定无反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
