前端用vue+bootstrap,需求是做可多選下拉框。

首先附上該外掛的下載地址。

要使用該外掛在引入jquery.js和bootstrap.js後還需要引入以上地址資源中的 bootstrap-select.min.css 和 bootstrap-select.min.js這兩個檔案。

<link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap-select.min.css" rel="stylesheet">

<script src="${request.contextPath}/statics/libs/bootstrap-select.min.js"></script>

html:

 <select id="rolese" title="請選擇" class="form-control selectpicker"  v-model="xxx"  multiple data-live-search="true"

  </select>

js:

roleList:{},

roleIdList:[]

載入下拉框列表

 $.get(baseURL + "xxx/xxx/select", function(r){       
                vm.roleList = r.list;   
                for (var i = 0; i < vm.roleList.length; i++) {
                    $('#rolese').append("<option value=" + vm.roleList[i].roleId + ">" + vm.roleList[i].roleName + "</option>");
                }
                $('#rolese').selectpicker('refresh');
                $('#rolese').selectpicker('render');
             
              
            });

下拉多選框賦值：

                 $('#rolese').selectpicker('val', vm.user.roleIdList);
                $('#rolese').selectpicker('refresh');
                $('#rolese').selectpicker('render');

以上就實現了下拉框對選的功能。

問題：

<select id="rolese" title="請選擇角色" class="form-control selectpicker"  v-model="user.xxxxList"  multiple data-live-search="true">
                           <option v-for="xxxxDict in xxxxList" v-bind:value="xxxx">
                                   {{ xxxxxxx }}
                              </option> 

                        </select>

這樣寫頁面沒有值，不知道有什麼解決辦法。