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脚本如下所示..我已经在mount（）中添加了脚本但是没有任何事情发生在我身上。但是当我输入控制台时，会出现下拉列表

  <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

试试这段代码：

putStrLn 2

Answer 2

修改

好的，现在我明白了你想要做什么......你想使用boostrap-select插件和Vue。

首先，你的依赖项是错误的，插件没有与更新版本的jQuery和Bootstrap兼容，我使用了与插件示例页面完全相同的版本。

其次，Vue正在更新选项的值，之后插件呈现了选择，因此您不会看到下拉列表。正确的方法应该是在ajax调用之后导入插件，但是对于你的情况，你应该在调用返回时重新渲染插件。如果在挂载时调用refresh方法，则渲染过早完成。要解决此问题，您可以将刷新置于超时内，以将其置于摘要周期的末尾。 Check this jfiddle

这只是一种解决方法，您应该处理导入并正确更新插件。

要预载selectPicker中的值，您必须初始化vm.category和vm.subcategory的值。您可以使用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(); }

您还应该更改视图并将v-bind:value=设置为post.cat_id和so.sub_cat_id。

Here is a jfiddle.

当我尝试使用vue js显示JSON数据时，Selectpicker无效？

2 个答案: