Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuejs: Callback after render

I have a Bootstrap popover that I want to attach to an element that has a conditional render; therefore, I must trigger $().popover() after the element has been attached to the DOM.

Is there a way to trigger a callback after a v-if statement inserts the elements into the DOM?

like image 382
Neve12ende12 Avatar asked Feb 14 '17 21:02

Neve12ende12


People also ask

How do you force Vue JS application to re render or reload?

The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.

Which comes first mounted or created?

mounted () : it will executed before creating the component. created () : it will executed after creating the component for render.

What does $emit do in Vue?

$emit to emit a custom event. Let's take a look at an example where we have MyTextInput. vue that contains a label and a text input. Whenever the text changes, we want to emit an event with the uppercased value of our input. Instead of calling $emit from our template, we can call a component method instead.

Do Vue events bubble?

Vue events don't bubble the component tree on their own. However when writing wrapper components this can be the desired behaviour. This code registers a global bubble directive which allows to re-emit all given events: Let's say we want to bubble events start , accelerate and brake of our component Car .


2 Answers

Use this in vuejs 2:

updated: function() {
    $('[data-toggle="tooltip"]').tooltip();
},

take a look here

like image 125
RichardMiracles Avatar answered Oct 03 '22 22:10

RichardMiracles


Vue.nextTick() defers the execution of the callback to be executed after the next update of the DOM, see: VueJS API reference

like image 21
Dirk Rejahl Avatar answered Oct 03 '22 23:10

Dirk Rejahl