부트 스트랩 선택이 초기화 될 때 Vue 루프가 작동하지 않습니다.

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> 

하지만 난) ($ ('selectteam.') selectpicker를 추가 할 때.;

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

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

아래 코드에 따라, 장착 방법는 이미 팀의 목록을 표시 나던. Btw 사용하고 있습니다 bootstrap-select - Silvio Moreto

Answer 1

nextTick을 사용해 보셨습니까? VUE 시계의 다음 틱에 bootstrapselect init을

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); 
      } 
     } 
    });