I have heading links on my sidebar that scrollspy on my main content and of course takes me to the referenced heading in the main content when I click on them. I have data coming from a JSON file and I would like to add the headings to the current url when they're clicked.
Let's say I have the headings(this is contained in my json object: headings.text
):
- Heading 1
- Heading 2
- Heading 4
When the user clicks on Heading 1, I want my current URL www.something.com
to change to www.something.com/Heading1
and likewise for the other headings.
How can I achieve this in Vue?
This is what I have so far.
<b-list-group-item :href="`#heading-${headingHash(headings.text)}`"> <--Heading reference.
<span>
<b>{{ index + 1 }}.</b> {{ headings.text }} <-- Heading itself.
</span>
</b-list-group-item>
Would appreciate some help. Thanks!