当我尝试使用 vue js 显示 JSON 数据时，Selectpicker 不起作用？

Posted 2023-02-22

【中文标题】当我尝试使用 vue js 显示 JSON 数据时，Selectpicker 不起作用？

【英文标题】：Selectpicker is not working when I try to display JSON data using vue js?

【发布时间】：2018-05-11 15:46:47

【问题描述】：

当我写 $('.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>

有没有办法初始化选择选择器？请帮帮我。

【问题讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【参考方案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.

【讨论】：

Uncaught (in promise) TypeError: Cannot read property 'sub_cat_id' of undefined

对我来说小提琴正在工作......尝试理解错误：你在哪里使用sub_cat_id？ undefined 可以是什么？提示：vm.services[0].sub_cat_id;，这是否意味着vm.services[0] 是undefined？为什么？你能做些什么来解决/检查它？

【参考方案2】：

试试这个代码：

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

【讨论】：

我可以通过这个加载类别..但我无法加载子类别