Gibt es ein Ereignis in Vue, das ausgelöst wird, nachdem ein Element neu gerendert wurde? Ich habe ein Objekt, das aktualisiert wird, wodurch meine Vorlage aktualisiert wird. Nachdem es aktualisiert wurde, möchte ich ein Ereignis auslösen, das eine jQuery-Funktion ausführt. Der Code sieht so aus:
template: `
<div class="undo-margin">
<div class="gradient">
<img v-bind:src="https://stackoverflow.com/questions/44659277/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);
});
}
}
Wie Sie sehen, habe ich versucht, das Überwachungsereignis zu verwenden, aber wenn das Überwachungsereignis ausgelöst wird, wird meine Seite noch nicht aktualisiert. blogPost wurde jedoch geändert, aber vue rendert die Seite immer noch. Ich weiß, dass ich das theoretisch beheben könnte, indem ich ein setTimeout hinzufüge, aber ich würde etwas Saubereres bevorzugen.
