Adding steps with .addSteps

[wishinghand]

Perhaps I'm missing something obvious, but I can't seem to get this plugin to work using the this.$intro().addSteps(steps) method. I can get it to work just fine only using the v-intro directives, but I wanted to source my steps from Vuex so that there was one central spot for step information and then I could import it into whichever components needed it and then just add id to elements.

I have an array in Vuex that looks like this:

steps: [
  {
    element: '#step1',
    intro: 'Click events to get started',
  },
  {
    element: '#step2',
    intro: `Search for your Organization's region by Zip or City`,
  },
],

And I have corresponding ids set on a pair of divs in a component. I then import the steps from Vuex. I checked that they came through with console log. In the mounted() lifecycle hook I have a pair of lines that I think should have kicked off the tour:

this.$intro().addSteps(this.steps)
this.$intro().start()

Nothing happens when I load that page and there are no errors in the console. Any ideas on what to do?

[migueog]

@wishinghand Hey! I was running into the same issue but I figured it out on my end.

My initial setup was like what you had:

this.$intro().addSteps(this.steps)
this.$intro().start()

I was able to fix my issue by doing the following:

let introJS = this.$intro();
introJS.addSteps(this.steps)
introJS.start()

Hope that helps my dude!

[wishinghand]

Any idea why this worked for you? I'll be able to try it a little later, my brain isn't putting together what I'm seeing quite yet. Is it a scoping issue for this?

[alex-oleshkevich]

@wishinghand this returns a pure new instance of introJs so it is up to you how to configure it.

This is referenced in README.md

[migueog]

@wishinghand Yeah, it's a scoping issue!