当我尝试使用vue js显示JSON数据时Selectpicker不工作？ [英] Selectpicker is not working when I try to display JSON data using vue js?

问题描述

当我写$（'。selectpicker'）。selectpicker（'refresh'）;在控制台中，它正在加载..我应该在哪里提供这段代码？

When I write $('.selectpicker').selectpicker('refresh'); in the console it is loading.. Where should I provide this code?

我的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脚本如下所示..我在mount（）中添加了脚本，但是我没有任何反应。但是，当我输入控制台时，出现下拉列表

My vue js script is as given below.. I have added the script in the mount() but nothing happens for me. But when I type in the console.. drop down list appears

  <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>

有什么办法可以初始化select picker吗？请帮助我。

Is there any way to initialize select picker? Please help me.

推荐答案

试试这段代码：

Try this code:

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

这篇关于当我尝试使用vue js显示JSON数据时Selectpicker不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！