问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vueJs 下拉多选框绑定无反应

头像
高老庄庄主
    514
    新手上路，请多包涵
    <!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，就可以绑定成功。。。。

    javascripthtml
    阅读 6.2k
    1 个回答
    得票最新
    头像
    KingMario
      7.2k31429
      ✓ 已被采纳

      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>&nbsp;<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 指令。

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题