Riotjs - mount tags dynamically

Question

How can I mount tags dynamically? This is what I have:

my-app.tag.html

<my-app id="mounting_point"></my-app>

nav-menu.tag.html

<nav-menu>
    <div class="menu_page">
        <div class="menu_page__items">
            <a onclick="{goTo}" class="menu_page__item" data-page_link="home-page">Home</a>
            <a onclick="{goTo}" class="menu_page__item" data-page_link="about-page">About</a>
            <a onclick="{goTo}" class="menu_page__item" data-page_link="contact-page">Contact</a>
        </div>
    </div>


   <script>
        export default {
            goTo(e) {
                let next_page = e.target.dataset.page_link;
                riot.mount("#mounting_point", {}, next_page)
            }

        }
    </script>
</nav-menu>

When I click on 'Home' the content of the home-page tag gets appended to the #mounting_point container, but when I click on another link the content of the mounting point is not replaced, but appended.

Thank you for any suggestions

Answer 1

Unmount the tag at the DOMNode before mounting the tag to it.

Pass riot.unmount the selector to unmount and an option to keep the parent.

       goTo(e) {
          let next_page = e.target.dataset.page_link;
          riot.unmount('#mounting_point', true);
          riot.mount('#mounting_point', {}, next_page);
        }