VueJS how to prevent all anchors with # values to reload-CodePudding

I have <a href='#section'> html injected on a div.

<div v-html="content"></div>

Every time the anchor is click, the page reload.

How can I prevent this from reload but still redirects to the section.

Thank you

CodePudding user response：

try this

<a href="#section" @click="$event.preventDefault()">

CodePudding user response：

Add an Updated hook to your component. In that hook create a new on click handler and call event.preventDefault()

Something like:

{
    Updated: () => {
       document.querySelectorAll("div a[href='#']").addEventListener("click", event => event.preventDefault())
    }
}