렌더링 후 Vue 구성 요소 이벤트

렌더링 후 Vue 구성 요소 이벤트

Vue에서 요소가 재생된 후에 해고되는 이벤트가 있습니까?개체를 업데이트하면 템플릿이 업데이트됩니다.업데이트 후 jQuery 기능을 실행하는 이벤트를 트리거합니다.코드는 다음과 같습니다.

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);
        });
    }
}

보시는 것처럼 워치이벤트를 사용해 보았습니다만, 워치이벤트가 트리거 되었을 때 아직 페이지가 갱신되지 않았습니다.blog Post는 변경되어 있습니다만, vue는 아직 페이지를 렌더링하고 있습니다.set Timeout을 추가하면 이론적으로 해결할 수 있지만 좀 더 깨끗한 것을 원합니다.

updated당신이 찾고 있는 것일 수도 있어요

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

편집: Vue3가 최신 버전이기 때문에 관련된 라이프 사이클 후크에 대한 링크가 표시됩니다.

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

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

updated()는 원하는 것입니다.

데이터 변경 후에 호출되면 가상 DOM이 재렌더링되고 패치가 적용됩니다.

이 후크가 호출되면 구성 요소의 DOM이 업데이트되므로 여기서 DOM 종속 작업을 수행할 수 있습니다.

언급URL : https://stackoverflow.com/questions/44659277/vue-component-event-after-render