当我尝试使用 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 脚本如下所示。我已经在 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

编辑

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

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

其次，在插件呈现选择之后，Vue 会更新选项的值，因此您看不到下拉菜单。正确的方法应该是在 ajax 调用之后导入插件，但是对于您的情况，您应该在调用返回时重新渲染插件。如果你在mounted中调用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.

Answer 2

试试这个代码：

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