Open modal in router-link Vue 3?

Question

As you can see below, I have buttons consisting of router-links. But I want to open a modal in calculator button. When I run the codes below, all the buttons are converted to the modal. But I just want the calculator to open on modal.

Here output

Here router-link

  <div class="container menu-title">
      <div class="shortcuts-horizontal pt-2 pb-2">
        <template v-for="(menuItem, j) in item.shortcuts" :key="j">
          <div class="menu-item btn-margin">
            <router-link
              class="menu-link shortcut-btn"
              active-class="active"
              :to="menuItem.route || menuItem.modal"
              data-bs-toggle="modal"
              data-bs-target="#calculator"
            >
              <span v-if="menuItem.svgIcon" class="menu-icon svg-margin">
                <span class="svg-icon svg-icon-4">
                  <inline-svg :src="menuItem.svgIcon" />
                </span>
              </span>
            </router-link>
          </div>
        </template>
      </div>
    </div>

Here modal

  <div class="modal fade" tabindex="-1" id="calculator">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
              </div>
            </div>
          </div>
        </div>

Here menu.ts

 shortcuts: [
      {
        route: "/activities/add/",
        svgIcon: "/media/icons/duotune/art/art002.svg",
        fontIcon: "bi-app-indicator",
      },
      {
        route: "/quotes/add/",
        svgIcon: "/media/icons/duotune/finance/fin010.svg",
        fontIcon: "bi-app-indicator",
      },
      {
        route: "/price-analysis/add/",
        svgIcon: "/media/icons/duotune/graphs/gra004.svg",
        fontIcon: "bi-app-indicator",
      },
      {
        route: "/projects/add/",
        svgIcon: "/media/icons/duotune/abstract/abs027.svg",
        fontIcon: "bi-app-indicator",
      },
      {
        modal: "#calculator",
        svgIcon: "/media/icons/duotune/finance/fin007.svg",
        fontIcon: "bi-app-indicator",
      },
    ],

score 1 · Answer 1 · answered May 31 '22 at 08:45

I define modals as child components in router view and use a <Teleport to="#modals"> in order to render it over my content as popup.

router element:

{
      path: '/',
      name: 'Home',
      component: YourPage,
      children: [
        {
          path: 'calculator',
          component: CalculatorModal,
        }
      ]
    }

your modal

 <Teleport to="#modals">
        <div class="modal fade" tabindex="-1" id="calculator">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                  </div>
                </div>
              </div>
            </div>
    </Teleport>

Open modal in router-link Vue 3?

1 Answers1