Basically whenever i open this page i need to add the script "D3.js". When i open the first time it all works right but if i change to another page and go back to this one, the script somehow doesn't load. I don't know, it seems like the "mounted" is executed only once. Im new to Vue.js anyway, thank you
const pagina2 = {
template: `
<div class="col-12 col-md-8">
<article class="bg-dark text-white border border-dark rounded mt-4 mb-4">
<h2 class="px-5 text-danger">Approfondimento Pagina 2</h2>
<div id="d3-container"></div>
<p class="px-5">Approfondimento</p>
<p class="px-5">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</article>
<!----------Page Navigation---------->
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item "><router-link class="page-link text-danger bg-dark border-dark" to="/">1</router-link></li>
<li class="page-item"><router-link class="page-link text-danger bg-dark border-dark" to="/pagina2">2</router-link></li>
</ul>
</nav>
</div>
`,
mounted(){
let D3script = document.createElement('script')
D3script.setAttribute('src', './JS/D3.js')
document.head.appendChild(D3script)
}
}```
Btw i solved putting the D3 code inside Vue as a method and then mounting on the app. Thank you anyway for you time :)