Load specific script when routing

Questions
1

Came across a problem where I need to load an html page with an inline script that must have set certain attributes when it loads to function properly, because if I programmatically change the data attribute value of the script tag, once loaded, the script does not take changes., so putting it in a modal in the index page is not a solution.

So putting it clean I need a way of loading a page that has a script inside, in a view, and before loading, pass additional data to that page (the data would become the data attribute on the script tag before loading) so when the page is loaded the script properly takes the data passed.

<div class="page">
<div class="navbar">
    <div class="navbar-inner sliding">
    <div class="left">
        <a href="#" class="link back">
        <i class="icon icon-back"></i>
        <span class="ios-only">Back</span>
        </a>
    </div>
    <div class="title">About Framework7</div>
    </div>
</div>
<div class="page-content">
    <form action="https://www.mi-sitio.com/procesar-pago" method="POST">
        <script
          id="scriptpago"
          src="https://www.mercadopago.com.ar/integrations/v1/web-tokenize-checkout.js"
          data-public-key="key"
          data-transaction-amount="100.00">
        </script>
    </form>
</div>

In this case “data-transaction-amount” is the value that I need to change before loading.
Is there a way of routing and loading scripts in the target page?

2

Inline scripts won’t work. Use page events to execute what you need on page load, or better Router Components https://framework7.io/docs/router-component.html

3

Almost everything starts to work fantastic when I use router components, seems it is time to learn a bit of Vue.

Thank you Vlad.