How to display a modal within a router-link in Vue 3?

Below are buttons with router-links. However, I only want the calculator button to open a modal. When I execute the code provided, all buttons trigger the modal instead of just the calculator button.

Output:

Router-link Code:

  <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>

Modal Code:

  <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>

Menu.ts Code:

 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",
      },
    ],
javascripttypescriptvue.jsvuejs3routerlink

Answer №1

In my approach, I see modals as child components within the router view. To display them as popups over the content, I utilize a 

<Teleport to="#modals">
.

Router setup:

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

Modal structure:

<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>

Answer №2

Consider incorporating the modal library into your project. Your code may resemble the following:

import Modal from "Modal.vue"

const routes = [
    {
        path: "/calculator",
        component: useModalRouter(Modal)
    }
]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the Javascript function getElementById to retrieve user input for passing a RSS FeedURL

I've been working on creating a basic form where users can input a Feed URL and see the contents displayed on the HTML page. For testing purposes, I have used "https://jquery-plugins.net/rss" as the feedUrl, and it has been functioning normally. This ...

javascripthtmljquery

Updating data scope in AngularJS using $http request not functioning properly

I am facing an issue where the $scope.user_free_status is not updating when I set a user free, but works perfectly fine when I unset the parameter. It's strange that I need to reload the page in one case and not the other. The data fetched is stored i ...

javascriptangularjsscopeionic-framework

What causes insertMany in mongoose to not generate ObjectIds?

Currently, I am in the process of developing an application using Node.JS and MongoDB. My challenge lies in inserting multiple documents with predefined _ids and some ObjectId arrays. When I utilize insertMany function, all document _id fields turn into st ...

javascriptnode.jsmongodbmongoosemern

I'm facing an issue where the data I retrieved is not displaying properly in my template within nuxt 3

After fetching data from an api, I can see it logged in my async function. However, the data stored in my array is not rendering on my template in Nuxt 3 The script setup includes: //ARRAY OF ALL THE DAILY WEATHER DATA PER DAY let allDataWeather=[]; ( ...

javascriptarraysvue.jsnuxt.jsnuxtjs3

How to use Axios in Vue JS to access an array within a JSON object

Struggling to access arrays inside a JSON object and save them into separate arrays. Despite trying various methods, I have not been successful in retrieving these arrays. I suspect that my approach to accessing arrays within the JSON object is incorrect, ...

javascriptjsonvue.jsaxios

Sorting method in Ext JS 6.2.0 using mode

Seeking clarification on the sort([field],[direction],[mode]) method in Ext JS 6.2.0. Can someone explain the distinction between append, prepend, replace, and multi as mentioned in the documentation available at this link? I am unable to find a clear expl ...

javascriptsortingextjsextjs6

The test session failed to launch due to an error in initializing the "@wdio/cucumber-framework" module. Error message: [ERR_PACKAGE_PATH_NOT_EXPORTED]

I added @wdio/cli to my project using the command 'npm i --save-dev @wdio\cli'. Next, I ran 'npx wdio init' and chose 'cucumber', 'selenium-standalone-service', 'typescript', 'allure' along w ...

typescriptcucumberwebdriver-iocucumberjs

Using TypeScript to create a unique object type that is mapped with generics for each key

Suppose I have a type representing an array of two items: a list of parameters and a function with arguments corresponding to the parameters. I've created a handy function to infer the generic type for easy use. type MapParamsToFunction<A extends a ...

typescripttypescript-generics

Retrieving POST request headers in Nightmare JS following a click() function execution and a wait() function delay

When I navigate a page, I input something in a field using type(), click on a button with click(), and then wait for an element to appear using wait(). I am interested in retrieving all the headers associated with the POST request that is triggered after ...

javascriptnode.jsnightmare

Why is my RxJS timer not waiting for the specified time?

I'm diving into the world of RxJS and trying to grasp its concepts. During some testing, I encountered a puzzling issue that has me stumped. Below is the snippet in question : let item = { id: 1, name: 'chair' }; const asyncItem = timer(20 ...

angulartypescriptrxjs

Utilizing i18next for both a custom Typescript library and a host simultaneously: a step-by-step guide

Currently, I am in the process of developing a typescript library that is designed to take in an object and generate an excel file. This library is intended for use with multiple React applications. Each React application, or host, will provide its own obj ...

reactjstypescripti18nextreact-i18next

configure dynamic content within the slider element

Currently, I am experimenting with two jQuery plugins (awkward/Coda Slider 3) to implement a sliding effect for DIV content. Everything seems to be working smoothly until I attempt to set dynamic content (using JavaScript) after creating the plugin object. ...

javascriptjqueryhtml

What is the method for enlarging the width of the nvd3 chart timespan?

Click here In the Plnkr linked above, I have included the latest versions of d3 and nvd3 libraries. Upon initial viewing of the chart, you may notice that all the timespan ticks such as 09:00, 08:30, 08:00, etc., are overlapping on the left xAxis. The ti ...

javascriptangularjsd3.jschartsnvd3.js

Challenges in navigating routes with vue.js

Having some issues with my pages not displaying properly. I suspect it could be due to my routing setup. I am fairly new to this so any help would be appreciated. Here is a link to my project on GitHub: https://github.com/PietroSerra/order-login-master2 ...

vue.jsvue-routerrouter

Challenges with form validation

Hello everyone, I'm a newbie to JS and struggling with my code. It seems like everything should work, but it just won't. The issue seems to be with the phone number form validation. I've written code that, in theory, should do the job, but ...

javascripthtml

Learn how to incorporate a consistent header and footer across multiple pages on a website with Node.js, ExpressJS, and either hbs or ejs templates

Creating a common header (navbar) and footer page to be included in multiple/several pages of a website. I want to create a dynamic website using Node.js and Express.js. The code for the navbar and footer will be placed in a common file named header.html ...

javascripthtmlnode.jsexpress

Tips for sending JSON-formatted data from a route to jQuery

Currently, I am facing a challenge with passing a JSON file retrieved from an API to jQuery. The goal is to implement an infinite scroll functionality using jQuery before displaying it in an EJS file. The issue arises when `res.json(data)` is utilized; ins ...

javascriptjquerynode.jsexpressroutes

Unable to access or modify properties within a function passed as an argument

deleteDialog(item, func: Function) { this.dialogService .open(ConfirmDialogComponent, { context: { title:"Are you sure?", cancelClss: "info", confirmClss: "danger", }, ...

angulartypescript

Utilize JavaScript to send an email containing a link and content

In the html form, there are input fields for adding a new user to the database. Once a user is added, an email is sent to them using the sendmail() function in the adduser.js file. The email is sent successfully according to my standards. However, I want t ...

javascriptjqueryhtmlnode.jsjsonp

Searching for an AngularJS and Bootstrap Dual Listbox Solution

I need a component like this to integrate into my project: I am hoping to add it using npm. However, I have tried some of the examples available but faced issues (encountered exceptions or only found bower instead of npm). The following are the examples ...

javascriptangularjstwitter-bootstrapnpm