How to run a js code after vuejs render html changes

Question

I am using a jquery date picker tool. But it is inside a v-if. When I toggle it on and off if I write this code it does not work.

showdatepicker:function(){
    this.datepicker= true;
    $(".jquery-date-picker").datepicker();
}

Because when $(".jquery-date-picker").datepicker(); runs vue still did not rendered html and added my datepicker input. But if change it to:

showdatepicker:function(){
    this.datepicker= true;
    setTimeout(function(){$(".jquery-date-picker").datepicker();},0);
}

It works. Because runs it after html render.

My question: is setTimeout a guaranteed way to do it after html render. Is there a proposed way in vuejs to do this right. I couldn't find any answer from my google and stackoverflow searches.

tony19 · Accepted Answer · 2022-07-15 23:38:56Z

2

You can use nextTick which will call a function after the next DOM update cycle.

this.datepicker = true;

Vue.nextTick(function () {
  $(".jquery-date-picker").datepicker();
})

And here is it's page in the documentation VueJS Docs

edited Jul 15, 2022 at 23:38

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 22, 2018 at 20:15

Josh

98611 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xdrm · Accepted Answer · 2018-04-22 20:16:07Z

0

Vue features triggers, in your case the mounted() function could be used. This articles describes how to use it and the whole Vue hook timeline : https://alligator.io/vuejs/component-lifecycle/

A stackoverflow explanation : Vue JS mounted()

answered Apr 22, 2018 at 20:16

xdrm

3992 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to run a js code after vuejs render html changes

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related