How to run a method after v-if in Vue.JS?

Question

I am wondering how to properly run the method after the HTML fragment is loaded. Let me show you an example, so it would be much clearer:

<div v-if="someProp">
    <div class="progress-bar">
      <div class="bar"></div>
    </div>
    <!-- Run method from here to activate progress bar -->   
</div>
<div v-else>
    No method here
</div>

Hope I could explain it clearly. Also I want to mention that the progress bar is activated by a jQuery with this method:

$(.progress-bar).progress()

I looked through different v-on events, but I could not find the proper one, that would fit my needs. I am perplexed...

Answer 1

You can just bind to the updated method and check if someProp is true to execute your jQuery:

updated() {
  if (this.someProp) {
    $('.progress-bar').progress()
  }
}