javascript - vueJs 下拉多选框绑定无反应

bootstrap select 初始化之后，会将 select 变成下面这样的结构：

<p 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>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
  </button>
  <p 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 src-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 src-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 src-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>
  </p>
  <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>
</p>

原来的 select 被移到这个 p 里面，并且样式被设置为 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 指令。