How to execute custom events after VUE DOM is loaded

I recently wanted to use vue to make a small thing, but who knew I encountered a difficult problem at the beginning:

First of all, I want to display the required information through the ajax request page before the page is loaded, so I requested the data I want in the created hook function.

created:function(){
   var url="/indexitem";
   var _self=this;
   $.get(url,function(data){
   _self.items=data;
   });
   $.get('/banner',function(data){
   _self.banners=data；
   });
  }

This step is very smooth. The next step is to bind the data to the corresponding element. Here I need to bind the requested image address to the corresponding element of the carousel image.

I am using the image carousel provided in the Mui framework (mobile side, supports gesture swiping), and the problem is exactly here:

<div  class="mui-slider" @click="greet()">
  <div class="mui-slider-group mui-slider-loop">
   <div class="mui-slider-item mui-slider-item-duplicate"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" :style="{backgroundImage: 'url(' + banners[-1].src+ ')',backgroundSize:'cover'}"></a></div>
   <div class="mui-slider-item" v-for="cc in banners"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" :style="{backgroundImage: 'url(' + + ')',backgroundSize:'cover'}"></a></div>
   <div class="mui-slider-item mui-slider-item-duplicate"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" :style="{backgroundImage:'url('+banners[0].src+')',backgroundSize:'cover'}"></a></div>
  </div>
  <div class="mui-slider-indicator">
   <div class="mui-indicator mui-active"></div>
   <div class="mui-indicator"></div>
   <div class="mui-indicator"></div>
   <div class="mui-indicator"></div>
  </div>
  </div>

After I bound the data, I found that the carousel map was invalid because I encountered the same problem when writing in native js before. My solution at that time was to wait for the page to load again to initialize it, but today I used vue and tried many life cycle functions but couldn't ensure that it was initialized after the page loading was completed.

More hope is to use data binding instead of direct dom operations, and vue does not provide a rendering complete hook.

So my solution today is: setTimeout()

After instantiating the VUE object, add the following code:

 setTimeout(function(){
  ($('#slider').length);
  var gallery = mui('.mui-slider');
  ({
   interval: 3000//Automatic carousel period, if it is 0, it will not be played automatically, and the default is 0;  });
  },1000);

The above method of executing custom events after loading VUE DOM is all the content I share with you. I hope you can give you a reference and I hope you can support me more.