Question

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

这样做是为了初始化selectpicker。当我运行时，它在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>

Answer 1

如果你正在使用Vue 2，则可能需要在挂钩中使用nextTick。

根据Vue.js文件：

请注意，mounted并不保证所有子组件也已安装。如果您想等到呈现整个视图，可以在vm.$nextTick内使用mounted：

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

Answer 2

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

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

Vue Js：selectpicker（＆＃39;＆＃39;刷新＆＃34;）无效

2 个答案: