初始化 bootstrap-select 时 Vue 循环不工作

Question

默认情况下，我的 select 下拉菜单中有一个循环，它可以正确显示数据。

<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>

但是当我按照下面的代码在安装的方法中添加 $('.selectteam').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 时钟的下一个滴答声中初始化 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);

我还应该提到 selected 选项。 Bootstrap-select 从初始化或刷新时删除任何 'selected' 属性 这就是为什么这里是防止这种情况的代码：

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

正如您从上面的代码中看到的，我们只是在初始化时将值设置在 bootstrap-select 中。

初始化 bootstrap-select 时 Vue 循环不工作

Vue loop not working when bootstrap-select is initialized

javascript

frontend

loops

bootstrap-select

vue.js