Menu
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.
296
Emitting Events with setup()$emit() to send our event. Instead, we can access our emit method by using the second argument of our setup function – context . context has access to your components slots, attributes, and most importantly for us, its emit method. We can call context.
The `mounted()` Hook in Vue The mounted() hook is the most commonly used lifecycle hook in Vue. Vue calls the mounted() hook when your component is added to the DOM. It is most often used to send an HTTP request to fetch data that the component will then render.
Custom events using Composition API The setup function accepts two arguments: props and context . We can access the component emit method from context . We can create a function where we call the emit method and run the function when the button is clicked.
Each Vue component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes.
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
74
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
