Question

默认情况下，我在选择下拉列表上循环显示正确的数据。

<select name="" id="input" class="form-control selectteam">
    <option value="" disabled="" selected="">Filter by team</option>
    <option v-for="(team, index) in  nblTeams" :value="team.clubName">{{team.clubName}}</option>
</select>

但是当我按照下面的代码在已挂载的方法中添加 $（＆＃39; .selectteam＆＃39;）。selectpicker（）; 时

mounted: function() {
        this.getCurrentSeasonTeams().then( (response) => {
            if( response.status == 200 && typeof(response.data) == 'object' ) {
                this.nblTeams = response.data;
            }
        });

        $('.selectteam').selectpicker();
    }

它不会显示球队名单。顺便说一句，我使用bootstrap-select - Silvio Moreto

Answer 1

你尝试过使用nextTick吗？在vue clock的下一个刻度上启动bootstrapselect

VUE docs, next-tick

示例

mounted: function() { this.getCurrentSeasonTeams().then( (response) => { if( response.status == 200 && typeof(response.data) == 'object' ) { this.nblTeams = response.data; } }); this.$nextTick(function(){ $('.selectteam').selectpicker(); }); }

编辑：

mounted: function() { this.getCurrentSeasonTeams().then( (response) => { if( response.status == 200 && typeof(response.data) == 'object' ) { this.nblTeams = response.data; this.$nextTick(function(){ $('.selectteam').selectpicker(); }); } }); }

Answer 2

不确定我所做的是否是解决我问题的好方法。添加了setTimeout方法，它可以工作。

    this.getCurrentSeasonTeams().then( (response) => {
        if( response.status == 200 && typeof(response.data) == 'object' ) {
            this.nblTeams = response.data;
            if(typeof(this.nblTeams) == 'object'){
                setTimeout(() => {
                    $('.team').selectpicker();
                }, 500);
            }
        }
    });

Answer 3

我遇到了类似的问题，并通过添加 setTimeout 来解决此问题：

setTimeout(function () {
   $('.select-reviewer').selectpicker();
}, 10);

或如果您已经初始化了selectpicker的话，则使用此选项：

setTimeout(function () {
   $('.select-reviewer').selectpicker('refresh');
}, 10);

我还要提及所选选项。 Bootstrap-select会在初始化或刷新时删除所有“选定的”属性，这就是为什么代码阻止了此操作：

setTimeout(function () {
   $('.select-reviewer').selectpicker('val', $('.select-reviewer option:selected').val());
}, delay);

从上面的代码中可以看到，我们只是在初始化时在bootstrap-select中设置了值。

初始化bootstrap-select时，Vue循环不起作用

3 个答案: