最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Vue.js Router: Run code when component is ready - Stack Overflow

programmeradmin1浏览0评论

I'm working on a single-page app with Vue.js and its official router.

I have a menu and a ponent (.vue file) per every section which I load using the router. In every ponent I have some code similar to this:

<template>
    <div> <!-- MY DOM --> </div>
</template>

<script>
    export default {
        data () {},
        methods: {},
        route: {
            activate() {},
        },
        ready: function(){}
    }
</script>

I want to execute a piece of code (init a jQuery plugin) once a ponent has finished transitioning in. If I add my code in the ready event, it gets fired only the first time the ponent is loaded. If I add my code in the route.activate it runs every time, which is good, but the DOM is not loaded yet, so is not possible to init my jQuery plugin.

How can I run my code every time a ponent has finished transitioning in and its DOM is ready?

I'm working on a single-page app with Vue.js and its official router.

I have a menu and a ponent (.vue file) per every section which I load using the router. In every ponent I have some code similar to this:

<template>
    <div> <!-- MY DOM --> </div>
</template>

<script>
    export default {
        data () {},
        methods: {},
        route: {
            activate() {},
        },
        ready: function(){}
    }
</script>

I want to execute a piece of code (init a jQuery plugin) once a ponent has finished transitioning in. If I add my code in the ready event, it gets fired only the first time the ponent is loaded. If I add my code in the route.activate it runs every time, which is good, but the DOM is not loaded yet, so is not possible to init my jQuery plugin.

How can I run my code every time a ponent has finished transitioning in and its DOM is ready?

Share Improve this question asked Jul 13, 2016 at 23:25 Agu DondoAgu Dondo 13.6k7 gold badges62 silver badges71 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 2

As you are using Vue.js Router, it means that each time you will transition to a new route, Vue.js will need to update the DOM. And by default, Vue.js performs DOM updates asynchronously.

In order to wait until Vue.js has finished updating the DOM, you can use Vue.nextTick(callback). The callback will be called after the DOM has been updated.

In your case, you can try:

route: {
    activate() {
        this.$nextTick(function () {
            // => 'DOM loaded and ready'
        })
    }
}

For further information:

  • https://vuejs/api/#Vue-nextTick
  • https://vuejs/guide/reactivity.html#Async-Update-Queue

You can use

mounted(){
  // jquery code
}

Though this may be a bit late... If I guess correctly, the ponent having problem stays on the page when you navigate between routes. This way, Vue reuses the ponent, changing what's inside it that needs to change, rather than destroy and recreate it. Vue provides a key attribute to Properly trigger lifecycle hooks of a ponent. By changing a ponent's key, we can indicate Vue to rerender it. See key in guide for details and key in api for code sample.

发布评论

评论列表(0)

  1. 暂无评论