selectpickerとvueの統合

転載記事：
bootstrap-select multi-select box and Vue Integration
https://blog.csdn.net/z_tankeer/article/details/90374992

個人練習キーコード：

• html

 <div class="form-group">
      <div class="col-sm-2 control-label">推荐人id</div>
       <div class="col-sm-10">
           <select  class="tagSelect" data-live-search ="true" title="请选择"  v-model="recomEvaluation.recommenderId" >
               <option v-for="item in recommenderItems" :value="item.id">
                   {
   
   { item.name }}
               </option>
           </select>
       </div>
 </div>

• js

$(function () {
    
     

    $(".form_date").datetimepicker({
    
    
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        format: "yyyy-mm-dd"
    });

    $(".form_datetime").datetimepicker({
    
    
        language: 'zh-CN',
        // weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 0,
        maxView: 4,
        forceParse: 0,
        format: "yyyy-mm-dd hh:ii:ss"
    });

    $(".tagSelect").selectpicker();
});


var vm = new Vue({
    
    
    el: '#rrapp',
    data: {
    
    
        showList: true,
        title: null,
        recomEvaluation: {
    
    },
        recommenderItems: [
        ]
    },
    //监听部分
    watch: {
    
    
        /**
         * 监听后端的返回结果集
         */
        recommenderItems:function () {
    
    
            this.$nextTick(function () {
    
    
                $('.tagSelect').selectpicker('refresh');
            })
        },
 		saveOrUpdate: function (event) {
    
    
            console.log(vm.recomEvaluation);
            return;
            }
        })
        

• 効果を確認します。
  
  
  [OK]をクリックします。
  コンソールを確認します。
  

オプションの切り替え：

コンソールを見てください：

総括する：

1：Selectpickerの選択理由：select2よりわずかに優れています

2：選択した動的データを表示するには、ウォッチデータセットが必要です。表示しない場合、データブランクが表示されます。

---

終了