vue jsを使用してJSONデータを表示しようとすると、Selectpickerが機能しません。

Question

$（ '。selectpicker'）を書くと、selectpicker（ 'refresh'）;コンソールにロードされています。このコードはどこで提供しますか？

私のHTMLコードは下記のよう

<form action="" class="form-inline" onsubmit="return false;" method="post" id="categories"> 
<div class="row"> 
    <div class="col-xs-6"> 
     <select id="lunchBegins" class="selectpicker" data-live-search="true" data-live-search-style="begins" title="Select Your City" v-model="category" name="category"> 
      <option v-for="post in articles" v-bind:value="post.name">{{post.name}}</option> 
     </select> 
    </div> 
    <div class="col-xs-6"> 
     <select id="basic" class="selectpicker show-tick form-control" v-model="subcategory" name="subcategory"> 
      <option v-for="so in services" v-bind:value="so.name">{{so.name}}</option> 
     </select> 
    </div> 
</div> 
</form> 

マイVUE jsのスクリプトがある..です私は（マウントでスクリプトを追加している）が、何も私のために起こりません。私は、コンソールで入力するときには...リストは

<script> 
categories = new Vue({ 
    el: '#categories', 
    data: { 
     articles: [], 
     services: [], 
     category: 0, 
     subcategory: 0, 
     content: false 
    }, 
     watch: { 
      subcategory: function(e) { 
      this.prefetch(); 
      }, 
      category: function() { 
      var self = this; 
      self.subcategory = 0; 
      $.ajax({ 
       url: "https://n2s.herokuapp.com/api/post/get_all_services/", 
       data: { 
       'service': self.id 
       }, 
       type: "POST", 
       dataType: "JSON", 
       success: function(e) { 
       console.log('Loading services'); 
       console.log(self.category); 
       let categoryIdArray = self.articles.filter(x=>x.name==self.category); 
       console.log(categoryIdArray); 
       self.services = e.filter(x=>x.cat_id==categoryIdArray[0].cat_id); 
       console.log(self.services); 
       self.prefetch(); 

       } 
      }); 
      }, 
     }, 

    mounted: function() { 

    $('.selectpicker').selectpicker('refresh'); 

     var vm = this; 

     $.ajax({ 
      url: "https://n2s.herokuapp.com/api/post/get_all_category/", 
      method: "GET", 
      dataType: "JSON", 
      success: function(e) { 

        console.log(e); 
       vm.articles = e; 
       console.log(vm); 
      }, 
     }); 
    }, 

}) 
</script> 

を表示されますドロップダウン選択ピッカーを初期化する方法はありますか？私を助けてください。

Answer 1

このコードを試してみてください。

$(window).load(function() { 
    $('.selectpicker').selectpicker('refresh') 
}); 

Answer 2

EDIT

[OK]を、今私はあなたがboostrap-selectプラグインとのVueを使用したい...あなたが何をしたいのか理解しています。

まず、あなたの依存関係は間違っています、プラグインは新しいバージョンのjQueryとBootstrapとの互換性がありません。プラグインのサンプルページにあるものと全く同じバージョンを使用しました。

第2に、プラグインが選択をレンダリングした後にVueがオプションの値を更新しているため、ドロップダウンが表示されません。正しい方法は、ajax呼び出しの後にプラグインをインポートすることですが、あなたのケースでは、呼び出しが戻るときにプラグインを再レ​​ンダリングする必要があります。マウントされた状態でrefreshメソッドを呼び出すと、レンダリングが早すぎます。これを回避するには、リフレッシュをタイムアウトの内側に置いてダイジェストサイクルの最後に置くことができます。 Check this jfiddle。

これは回避策にすぎません。インポートに取り組み、プラグインを正しく更新する必要があります。

---

あなたはvm.categoryとvm.subcategoryの値を初期化する必要がありselectPickerで値をプリロードします。これはmounted()メソッドで行うことができます。ここで

は（私は、コードをスピードアップするためにasync/awaitを使用）例を示します

async mounted() { 
    var vm = this; 

    //First thing GET all the articles 
    vm.articles = await $.ajax({ 
    url: "https://n2s.herokuapp.com/api/post/get_all_category/", 
    method: "GET", 
    dataType: "JSON" 
    }); 

    //Select the first result as your category (you should check if there are articles) 
    vm.category = vm.articles[0].cat_id 

    //Here you get the services... really strange WS since it returns all the services, not filtered by category... 
    vm.allServices = await $.ajax({ 
    url: "https://n2s.herokuapp.com/api/post/get_all_services/", 
    data: { 
     'service': vm.category //???? 
    }, 
    type: "POST", 
    dataType: "JSON" 
    }) 
    //... so we have to filter them in the client! 
    vm.services = vm.allServices.filter(s => s.cat_id === vm.category); 

    //Now select the subcategory to preload it 
    vm.subcategory = vm.services[0].sub_cat_id; 
    //You can call the fetch WS to get the content with category and subcategory 
    this.prefetch(); 
} 

また、あなたはpost.cat_idとso.sub_cat_idにv-bind:value=を表示し、設定変更する必要があります。

Here is a jfiddle.