뷰 JS :.. 내가 실행할 때이 selectpicker를 초기화하기위한 것입니다

Question

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

작동하지 selectpicker ('' '새로 고침)이 크롬의 콘솔에 .. 드롭 다운 목록 그래서, vuejs에이 코드를 추가 나타납니다 하지만 아무것도 일어나지 않습니다 ... 나는 같은 질문에 대한 다른 질문을하고 답변을 얻지 못했습니다. 동일한 초기화 할 수있는 방법이 있습니다. 내 프런트 엔드 html 및 vuejs 및 백엔드 파이썬 Django .. 나는 붙어 또는 지난 2 일 오전 새로운 아무것도하지 않았다. 같은를 초기화 할 수있는 방법이 있습니까?

내 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 코드는 뷰 2를 사용하는 경우, 당신은 장착 후크 nextTick을 사용해야 할 수도 있습니다

<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.js 문서에 따르면

: mounted이 모든 하위 구성 요소도 장착 된 것을 보장하지 않습니다

참고. 당신이 전체 뷰가 렌더링 될 때까지 대기하는 경우에, 당신은 mounted의 vm.$nextTick 내부를 사용할 수 있습니다

이

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