TL;DR
I need to change the URL of an anchor. The anchor has the __vue__ property. Simply modifying the href attribute of the anchor is not changing the behavior when clicking on it. Using vanilla Javascript, how can I change the anchor in Vue so that the anchor points to where I need it to point? (I only have access to the DOM since this is a 3rd party CMS that I can't control).
More details
I'm using a CMS service that allows to load custom Javascript in the <head> section of page.
The rendered website has multiple anchors pointing to different URLs each.
I want to change the URL for one of the elements.
I've tried doing:
els = document.querySelectorAll('a[href*="/here"]');
els.forEach((el) => {
el.href="/elsewhere";
el.onClick = (e) => {e.preventDefault()}
})
The problem is that clicking on the anchor element it still goes /here instead of /elsewhere as expected.
Upon further review, the anchor elements have the __vue__ property, suggesting these were created and are managed by Vue.js.
How can I use vanilla Javascript to modify the href of these anchors and update Vue.js on where the link is pointing ?
For what its worth, here's a screenshot of <a/> tag I see in the browser whose href I want to modify:
question from:
https://stackoverflow.com/questions/65864100/how-to-modify-anchors-behavior-href-onclick-after-page-that-uses-vue-has-be 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
