Vue组件渲染后的事件
Vue组件渲染后的事件
在Vue中是否有一个在元素重新渲染后触发的事件？我有一个更新的对象，它会导致模板更新。在更新后，我想触发一个事件来运行一个jQuery函数。代码如下：
模板部分：
template: `
{{blogPost.title}}
`,
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);
});
}
}
如你所见，我尝试使用watch事件，但是当watch事件触发时，我的页面还没有更新。但是blogPost已经被更改了，但是Vue正在渲染页面。我知道我可以通过添加setTimeout来解决这个问题，但我更喜欢一种更简洁的方法。