search

usablica / intro.js

Lightweight, user-friendly onboarding tour library
http://introjs.com
Other
22.8k stars 2.59k forks source link

[Question] showHints() displays hints from other routes ( vue ) #1428

Closed Jumborner closed 3 years ago

Jumborner commented 3 years ago

Hi, using intro js in Vue. I have added the script into the index.html <script src="/node_modules/intro.js/intro.js"> </script> .

In one of my components, I have a dynamic form, which elements receive a :data-hint="$t(toolHints[115835])". The addHints() function is inside of the onMounted hook of the component. I have a "Show Hints" button on top of my layout which triggers the introJs().showHints();.

So the problem is that, I press the show hints button on this page ( Settings ), and then say go to the main page ( Main ), which has its own hints. I then press the show hints again, and instead of displaying me the current page's hints, it shows me the hints from the Settings page ( in the left side of the page ). If I trigger the hints on the main page, then go to settings and trigger the hints there, the settings page's hints are not displayed, but I get two hints from the main page floating around. I use hideHints() inside of the router.aftereach to hide the hints on route change ( otherwise old hints stay there ) but the problem is still present even without this.

Jumborner commented 3 years ago

Turns out there is a removeHints() function which is not listed inside of the documentation. This works.