Vue Js：selectpicker（''refresh'）不起作用

Posted 2023-02-22

【中文标题】Vue Js：selectpicker（\'\'refresh\'）不起作用

【英文标题】：Vue Js: selectpicker(''refresh") not workingVue Js：selectpicker（''refresh'）不起作用

【发布时间】：2018-05-12 16:52:44

【问题描述】：

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

这样做是为了初始化选择器。当我运行它时，它在 chrome 的控制台中。出现下拉列表。所以，在 vuejs 中，我在 mount() 中添加了这段代码。但什么都没有发生。我问过另一个同样的问题，但没有得到答案。有什么方法可以初始化相同的。我的前端是 html 和 vuejs，后端是 python Django .. 我被卡住或过去两天没有得到任何新东西。有什么方法可以初始化吗？

我的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>
searchContent = new Vue(
        el: "#searchContent",
        data: 
          vector: 
        
      );
categories = new Vue(
    el: '#categories',
    data: 
        articles: [],
        services: [],
        category: 0,
        subcategory: 0,
        businessName: 0,
        district: 0,
        content: false
    ,
      watch: 
           subcategory: function(e) 
            this.prefetch();
          ,
          businessName: function(e) 
            this.prefetch();
          ,
          district: 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() 



        var vm = this;
this.$nextTick(function () 
     $('.selectpicker').selectpicker('refresh')
  );
        $.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);
            ,
        );
    ,

          methods: 
          prefetch: function() 
            var filter = ;
            filter['category'] = this.category;
            filter['subcategory'] = this.subcategory;
            filter['businessName'] = this.businessName;
             filter['district'] = this.district;
            if (this.content !== false)
              this.content.abort()
            this.content = $.ajax(
              'url': 'https://n2s.herokuapp.com/api/post/filter/',
              data: filter,
              dataType: "JSON",
              type: "POST",
              success: function(e) 

                 window.searchContent.vector = e.data;
                console.log(e);
              
            )
          
        

)
</script>

【问题讨论】：

请提供代码。

@ankitapatel iUpdated

控制台怎么样？它们是否以正确的顺序打印？

是的先生..一切正常..如果我从 html 代码中删除 class="selectpicker" ，一切都会正确

那么如果selectpicker代码仍然存在，它会影响控制台吗？如果是，它会如何变化？

【参考方案1】：

如果您使用的是 Vue 2，您可能需要在挂载的钩子中使用 nextTick。

根据 Vue.js 文档：

请注意，mounted 不保证所有子组件也已安装。如果你想等到整个视图被渲染，你可以在mounted里面使用vm.$nextTick：

mounted: function () 
  this.$nextTick(function () 
    // Code that will run only after the
    // entire view has been rendered
  )

【讨论】：

谢谢先生的帮助..但是试过..还是一样的效果

this.$nextTick(function () $('.selectpicker').selectpicker(); alert("ogbfds") $('.selectpicker').selectpicker('refresh') );先生，如果我添加警报类别正在加载..但 sucategory 仍未加载

似乎$('.selectpicker') 没有得到正确的元素。您可以通过setTimeout 调用来解决它，但这不是一种安全的方法。

有什么方法可以初始化一样

这不是完全相同的问题here吗？我还建议使用 setTimeout，但正如@wxsm 所说，这不是最佳做法......

【参考方案2】：

我遇到了同样的问题，select 输入被vue.js 修改，因此它们发生冲突。对我来说，solution 是这样的：

updated() 
    $('.bSelect').selectpicker(
        liveSearch: true,
        size: 10
    );
    $('.bSelect').selectpicker('refresh');