Vue instance is not reachable from before() method

[NikoFoX]

Describe the bug I wanted to use before() method to make an actual change in my UI (show a modal), but I cannot reach my modals, eventBus or anything in my app by this, as I usually do. I tried to maybe change the type of before method (not arrow but function ()) but it didn't help.

To Reproduce Steps to reproduce the behavior:

1. Make a method/modal reachable in whole app, e.g. modal or $eventBus.
2. Create a step with before() method and try to interact with defined method/modal, e. g. this.$eventBus.
3. Get an error about "$eventBus of undefined" because it doesn't recognize this as Vue instance.

Expected behavior I can reach $eventBus or any globally reachable object/method of my app.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: ubuntu 20,04
• Browser: chrome, ff
• Version: latest

[NSiggel]

Have anyone had any success resolving this issue ?

I think it's my lack of experience with Promises, but not having success in accessing my "this." vue instance to change some reactive properties which would alter the UI for the rest of the tour to proceed as I would like.

WORKS : before : () => console.log("Logging seconds step") ERROR: before : () => { this.myproperty = true }

Can anyone post an example of a working before() property on a step which alters a variable in the data() of an app ?

---

Additionally, maybe it's a 2.0 breaking change, but don't seem to be able to define callbacks properly, even using the documentation sample examples, so kind of stumped, any suggestions would be dearly welcome.

in data myCallbacks: { onNextstep: this.myCustomNextStepCallback }, in methods myCustomNextStepCallback(currentStep) { console.log('[Vue Tour] A custom nextStep callback has been called on step ' + (currentStep + 1)) },

Application completely breaks on trying to load with a [Vue warn]: Error in data(): "TypeError: Cannot read properties of undefined (reading 'myCustomNextStepCallback')"

Chrome:95 Windows "vue": "^2.6.11", "vue-tour": "^2.0.0", "vuetify": "^2.2.11", (read some people talking about compatibility issues?)

[Hextar]

@NSiggel +1 as I also can't access the Vue instance in the before method.

For your second issue are you possibly using the data short version? Maybe have a try with something like:

data() {
		return {
			tourCallbacks: {
				onNextStep: this.onNextStep,
				onSkip: this.onSkip,
				onFinish: this.onFinish,
			},
		};
	},

[ondrinevg]

@NSiggel I don't think that is still interesting to you, but may be for someone it will be usefully.

You can create function, which return array of your steps, give there as parameter vue instance or anything what you need and you will use it in before() methods as you wish.