0

According to the Vue.js API documentation using nextTick() inside mounted() will guarantee that the entire view has rendered, but I am not sure what they mean by "rendered" in this case.

I am trying to integrate the intro.js library intro Vue.js, but if I use put introJs().start() inside of nextTick like the following:

mounted: function () {
  this.$nextTick(function () {
    // Code that supposedly will run only after the
    // entire view has been rendered
       introJs().start()
  })
}

it seems like the DOM is still not fully ready and introJs fails to show all intro steps successfully.

Reproduction link

How can I know that everything is truly ready? Is there any other way to start introJs within Vue.js?

tony19
  • 125,647
  • 18
  • 229
  • 307
tatsuhirosatou
  • 25,149
  • 14
  • 39
  • 40

1 Answers1

0

The problem is that you are using v-if. If the condition is false, the html element will not be in document, meaning introjs can't find it. In the browser dev tools, if you look at the component when the v-if condition is false, you would see an html comment, <!-- -->.

The easy fix is to use v-show. This way the element will be in document, introjs can find it, and the user still won't see it because v-show toggles the display css property.

Eric Guan
  • 15,474
  • 8
  • 50
  • 61
  • The same problem still occurs though because of the lag introduced by the AJAX load. I simulated that by adding a delay. If you click fast enough on the tour before the ajax load is ready, the intro will appear in the wrong location. – tatsuhirosatou Oct 19 '17 at 14:49
  • Okay well now `mounted` is no longer appropriate. You need a variable per item that keeps track of the ajax status. https://jsfiddle.net/eejn7p27/1/. This will start the intro once all ajax is done. – Eric Guan Oct 20 '17 at 00:37