bootstrap下拉多选框（bootstrap-select）

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

首先附上该插件的下载地址。

bootstrap-select开源地址：https://github.com/silviomoreto/bootstrap-select

要使用该插件在引入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>

这样写页面没有值，不知道有什么解决办法。