解決辦法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bootstrap-select多選框與Vue整合</title> <!--樣式依賴--> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap-select/1.13.7/css/bootstrap-select.min.css" rel="stylesheet"> <!--js庫依賴--> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-select/1.13.7/js/bootstrap-select.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/i18n/defaults-zh_CN.min.js"></script> <script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body > <!--dom部分,multiple刪除掉就是單選了--> <div id="app" v-clock> <select id="sel" v-model="select_list" title="請選擇" multiple data-live-search="true"> <option v-bind:value="item.id" v-for="item in result_list"> {{item.id}} </option> </select> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div>已選擇:</div> <div v-for="item in select_list"> {{item}} </div> </div> <script> var vm = new Vue({ el: '#app', // 數據部分 data: { //接收后端的返回結果集 result_list:[], //接收已經選擇的結果集 select_list:[] }, //監聽部分 watch: { /** * 監聽后端的返回結果集 */ result_list:function () { this.$nextTick(function () { $('#sel').selectpicker('refresh'); }) }, /** * 監聽已經選擇的結果集 */ select_list:function () { console.log(this.select_list) } }, created: function () { }, //初始化數據加載部分 methods: { /** * 初始化數據，向后端請求結果 */ init:function () { //代替http請求 this.result_list = [{id:"成都"},{id:"北京"},{id:"上海"},{id:"深圳"}]; $('#sel').selectpicker({ multiple: true, actionsBox: true }) } } }) /** * 初始化部分,必須放在vue外部,不可以在vue的created內調用 */ $(function () { vm.init(); }); </script> </body> </html>
注意：主要是要給從后台獲取的數據添加監聽，並刷新下拉帶搜索的功能。
效果圖：
文章轉載：https://blog.csdn.net/z_tankeer/article/details/90374992