Pressing ctrl and clicking on a link created with the tag element in VueJS will activate

When using a router link without an anchor tag, I am able to ctrl+click the link to open it in a new tab. However, when used with a tag (e.g., tag="td"), the ctrl+click functionality no longer works. The same issue occurs with clickable elements generated using @click.prevent.

<router-link :to="`/contracts/${row.id}`">
  {{ row.type | initials }}
</router-link>

Ctrl+click works with this setup.

<router-link tag="td" :to="`/contracts/${row.id}`">
  {{ row.type | initials }}
</router-link>
<td @click.prevent="someAction()">
  {{ row.type | initials }}
</router-link>

Unfortunately, ctrl+click does not work here.

What could be causing this behavior and how can it be addressed?

javascriptvue.jsvue-router

Answer №1

One way to incorporate a router-link is by placing it outside of an a element

<router-link tag="td" :to="`/contracts/${row.id}`">
  <a>
  {{ row.type | initials }}
  </a>
</router-link>

In this scenario, the actual link will be wrapped inside the <a> tag (thus receiving the correct href), while the active class will affect the surrounding <td>.

https://i.stack.imgur.com/oSQSf.png Check out the reference document for more info.

Answer №2

To control the behavior of a router based on specific events, you can programmatically access it. This allows for easy debugging and provides a high level of input and output control.

<td @click.prevent="someAction($event)">xxxx</td>

...

someAction(event) {
  if (event.ctrlKey === true) {
    // Perform action if click with ctrl key
    let routeData = this.$router.resolve({path: …});
    window.open(routeData.href, '_blank');
  } else {
    // Perform action on regular click
    this.$router.push({path: …});
  };
}

Answer №3

Typically, the <router-link> tag defaults to using an <a> tag with an href attribute.

<a href="/contracts/123">RowType</a>

When you Ctrl+click on a link, your browser automatically opens it in a new tab. This default behavior does not apply to other elements, so nothing will happen if you try to Ctrl+click on them.

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

Invoking a function in JavaScript from within the same file

Currently in the process of developing a React application. One of the files I am working with is user.utils.js, where I have stored some utility functions that are utilized within my reducer. export const addUser = (state) => {} export const resetUse ...

javascriptreactjsexport

Issue with D3: Events not triggering transitions

I am currently working on creating a bar chart using D3 in Angular4. // Enter Phase this.chart.selectAll('.bar') .data(this.barData) .enter() .append('rect') .attr('class', 'bar'); // Update Phase let bars ...

javascriptjquerycssangulard3.js

When examining an element in an Angular application using Chrome Dev Tools, why do I not observe raw HTML code?

Just as the title suggests, my question is: Even if browsers don't understand Angular, why am I able to see Angular elements while inspecting the DOM despite using AOT (Ahead-Of-Time Compilation) which means there is no Angular compiler in the browse ...

javascripthtmlangulardomgoogle-chrome-devtools

The toISOString() method is deducting a day from the specified value

One date format in question is as follows: Tue Oct 20 2020 00:00:00 GMT+0100 (Central European Standard Time) After using the method myValue.toISOString();, the resulting date is: 2020-10-19T23:00:00.000Z This output shows a subtraction of one day from ...

javascriptangulartypescripttoisostring

Arranging a collection of objects (Displaying information in a random sequence)

Here is a summary of the data returned in a shortened version: var array = [{ "response": { "itineraries":[ { "price": { "totalPricePerPassenger":"104" ...

javascriptarrayssortingobject

jquery makes it easy to create interactive hide and show effects

The main concept is to display the element upon clicking and hide it when there is any mouse click event. Below is the HTML code I'm using: <ul> <li> <span class="name">Author 1</span> <span class="affiliation"&g ...

javascriptjquerytoggle

Error encountered while trying to implement sleep function in script

Good evening. I've been attempting to implement the sleep function from the system-sleep library, but my script keeps crashing. This is the code snippet I'm working with: page.html <html lang="en"> <head> <meta charset= ...

javascriptnode.js

Implementing efficient loading and dynamic updates in web applications with Angular.js and php through

Currently, I am working on a project that requires lazy loading of images. However, a new requirement has come up which involves a server batch process pulling images from a database at regular intervals. These images must then be appended to the photos ...

javascriptphpangularjs

Retrieve a specified child object within its parent object using a string identifier

I have a situation where I need to create a JavaScript function that can extract a child object from a parent object based on a specific string identifier. Here is an example of what I'm looking for: function findChild(parent, name) { return par ...

javascript

Unable to verify POST $http request using $httpBackend

Currently, I am in the process of writing unit tests to cover the http requests of my app. Using Jasmine and Karma, I have been following a tutorial on how to use $httpBackend from https://docs.angularjs.org/api/ngMock/service/. However, I encountered an e ...

javascriptangularjsjasminekarma-runnerkarma-jasmine

Changing the border color of a Material UI textbox is overriding the default style

Upon the initial page load, I expected the border color of the text box to be red. However, it appeared grey instead. I tried setting the border color to red for all classes but the issue persisted. Even after making changes, the border color remained unch ...

javascripthtmlcssreactjsmaterial-ui

Leveraging Masonry.js with dynamically created divs using jQuery

Recently, I discovered Masonry.js and was excited to incorporate it into my projects. To test my skills, I decided to create a page that would display 16 divs with random heights and colors every time I clicked a button. However, I'm encountering an i ...

javascriptjqueryhtmlcssjquery-masonry

Having issues with Facebook's login API for JavaScript?

Apologies for the improper formatting. I am encountering errors in my JavaScript compiler while working with the Facebook Login API... Error: Invalid App Id - Must be a number or numeric string representing the application id." all.js:53 "FB.getL ...

javascriptfacebookapifacebook-javascript-sdkapp-id

"Troubleshooting a bug: GetElementById function fails to find elements with hyphenated

When calling attr('id') on an immutable id attribute for an HTML element, my code runs smoothly when the id contains no hyphens. However, it encounters issues when the id includes a hyphen. $('.coloursContainer .radio-box').live(' ...

javascriptjqueryhtml

I am not enhancing the array's value; rather, I am substituting it

Hey everyone, I'm currently working on extracting an array of Sizes and Colors from an object. The goal is to trigger a handler, clickHandler(), when the input is clicked. However, each time the handler is invoked, the code ends up replacing the value ...

javascriptreactjsnext.js

Developing a fresh instance in JavaScript

Currently, I am working with a JSON object that I'm required to use in my project. const template = require('../../../../assets/jsons/article-tpl.json'); Next, I need to iterate through an array and utilize this object to generate a new te ...

javascriptangularjsjsonobject

Webpack compatibility issue hindering big.js node module functionality

I'm currently working on compiling (typescript files) and bundling my source code using webpack. Below is the content of my webpack.config.js file: const path = require('path') module.exports = { devtool: 'eval-source-map', en ...

javascriptnode.jstypescriptwebpackbig.js

How to modify the inactive color of a v-switch component in Vuetify

Looking to create a customized v-switch element with Vuetify, specifically aiming for unique colors in both the on and off states. Struggling to achieve the desired visual look, which can be seen here. https://i.stack.imgur.com/k2A2E.png Experimented wit ...

vue.jsvuetify.js

Utilizing multiple criteria to filter through a nested array

I am faced with an array structured as follows const treeObj = [ { id: 1, name: 'Section One', items: [ { id: 1, name: 'Section One Item One' }, { id: 2, name: 'Section One Item Two' }, ...

javascriptreactjsfilter

What is the best way to access the child DOM of a Vue element?

Is there a way to access the child DOM element of a Vue component? In the code snippet below, I am trying to retrieve the <input> element nested within the <div>. var vm = new Vue({ el: '#box', data: { pick: true, a: & ...

htmlvue.jsconsole