Vue component event after render

Question

Is there an event in Vue that gets fired after an element re-renders? I have an object that updates, which causes my template to update. After it updates I want to trigger an event which runs a jQuery function. The code looks like this:

template: `
    <div class="undo-margin">
        <div class="gradient">
            <img v-bind:src="blogPost.thumbnail"/>
            <h1 class="align-bottom">{{blogPost.title}}</h1>
        </div>

        <div class="container bg-faded">
            <article v-html="blogPost.article"></article>
        </div>
    </div>

`,
props: ["blogid"],
data: function () {
    return blogPageData;
},
mounted: function () {
    const blogid = jQuery("#blogPage").attr("blogid");
    if (this.authdata.roles.indexOf("Administrator") !== -1) {
        this.isAdmin = true;
    }

    this.getBlogPost(blogid);
},
methods: {
    getBlogPost: function (blogid) {
        var element = this;
        $.ajax({
            url: `/api/blog/${blogid}`,
            type: "get",
            headers: headers,
            success: function (data) {
                if (data === undefined) {
                    window.location.replace("/blog");
                } else {
                    element.isDetails = true;
                    element.blogPost = data;
                }
            },
            error: function (data) {
                window.location.replace("/blog");
                errorData.error = data.responseText;
            }
        });
    }
},
watch: {
    blogPost: function () {
        console.log(this.blogPost);
        jQuery("pre").each((i, e) => {
            hljs.highlightBlock(e);
        });
    }
}

As you see, I tried using the watch event, however when the watch event triggers, my page is not updated yet. blogPost however has been changed, but vue is still rendering the page. I know I could theoretically fix this by adding a setTimeout, but I would prefer something cleaner.

Stephen Gilboy · Accepted Answer · 2022-02-11 05:10:01Z

126

updated might be what you're looking for.

Vue2 https://v2.vuejs.org/v2/api/#updated

Edit: Now that Vue3 is the current version here are the links to the relevant lifecycle hooks.

Vue3 Composition API https://vuejs.org/api/composition-api-lifecycle.html#onupdated

Vue3 Options API https://vuejs.org/api/options-lifecycle.html#updated

edited Feb 11, 2022 at 5:10

answered Jun 20, 2017 at 17:20

Stephen Gilboy

5,8552 gold badges34 silver badges42 bronze badges

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

2 Comments

user2657943 Over a year ago

thank you, this does work. I also found out that you can use this.$nextTick(function () {...}); to execute code after updating the DOM. I'll leave it here in case somebody finds it useful as well

Philip Callender Over a year ago

Be aware that in some environments updated() will not get called when you refresh your page: See "This hook is not called during server-side rendering" at vuejs.org/v2/api/#updated.

tony19 · Accepted Answer · 2022-07-15 19:56:15Z

28

updated() should be what you're looking for:

Called after a data change causes the virtual DOM to be re-rendered and patched.

The component’s DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here.

edited Jul 15, 2022 at 19:56

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 20, 2017 at 17:21

David Hallberg Jönsson

8725 silver badges11 bronze badges

Comments

Joe Devine · Accepted Answer · 2022-09-20 21:45:28Z

If you are using Vue 3, you can utilize the nextTick() method. This method takes a callback, which will be called after the DOM has been updated due to a state change.

I have a similar situation where I need to trigger a change event on an element with jQuery on a legacy app. In my case I'm handling an event dispatched in a child component. Here's a rough example of my use case.

<template>
  <childComponent @valueChanged="triggerElementChange"/>
  <input ref="element" type="hidden" name="elementName"/>
</template>

<script setup>
import {ref, nextTick} from 'vue'
import ChildComponent from './ChildComponent'

// reference to element I want to trigger change on
// (identified by ref attribute with matching name)
const element = ref(null)

function triggerElementChange(){
  // state updated via child component prior to emitting valueChanged event

  // wait until DOM is updated, then trigger jQuery change event on referenced element
  nextTick(() => {
    $(element.value).change()
  })
}
</script>

Collectives™ on Stack Overflow

Vue component event after render

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related