Tips for retrieving a URL from a prop in a VueJS for loop

I am facing an issue with accessing the URL in my props to open them. Currently, I can only open them by right-clicking and selecting 'open in new tab,' but I want them to open when clicked. How can I correctly reference the href prop from the @click method?

<template>
  <div id="app">
    
    <div class="container">
<a :href="link.href" class="link" v-for="link in links" :key="link.href" @click="goTo">
      {{ link.name }}
    </a>
  </div>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return{
      links:[
 { name: 'Twitter', href: 'http://www.twitter.com' },
 { name: 'Github', href: 'http://www.github.com' },
]
    }
  },
  methods: {
    goTo() {
     window.open();
    }
  }
};
</script>

Answer №1

To open a new window from the URL, you simply need to provide the url as an argument to the goTo function.

<template>
  <div id="app">
    
    <div class="container">
<a href="javascript:void(0)" class="link" v-for="link in links" :key="link.href" @click="goTo($event, link.href)">
      {{ link.name }}
    </a>
  </div>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return{
      links:[
 { name: 'Twitter', href: 'http://www.twitter.com' },
 { name: 'Github', href: 'http://www.github.com' },
]
    }
  },
  methods: {
    goTo(e, href) {
     e.preventDefault()
     window.open(href);
    }
  }
};
</script>

Answer №2

If you want to achieve a similar effect, consider the following code snippet :

<a href="" class="link" v-for="link in links" :key="link.href" v-on:click.stop.prevent="goTo(link.href)">

In essence, using click.stop.prevent will stop the link from being clicked and redirected while executing the goTo function.

methods: {
  goTo(href) {
    window.open(href);
  }
}

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

PHP AJAX Request Failing to Transfer Files

I am having trouble with sending files in a PHP AJAX Request: Here is the form code: <form class="frmContact" action="#" method="post"> <div class="col-md-6"> <input type="hidden" name="emailTo" id= ...

What is the optimal frequency for saving data when dealing with a particularly extensive form?

I am facing a challenge with saving data to the database using Ajax. While I can handle this aspect, my difficulty lies in the fact that I have a very extensive form that is nested and cannot be altered. This large form consists of approximately 100 input ...

Having trouble implementing String.prototype in my factory

Currently, I am working on incorporating a function mentioned in this answer. String.prototype.supplant = function (o) { return this.replace(/{([^{}]*)}/g, function (a, b) { var r = o[b]; return typeof r === 's ...

Validating ReactJS properties

Transitioning from ReactJs to React-Native, I came across this function structure in a react-native button code by Facebook: class Button extends React.Component<{ title: string, onPress: () => any, color?: ?string, hasTVPreferredFocus?: ?bo ...

The toggle feature in Bootstrap is stuck in the "on" position and refuses to "untoggle."

Currently, I am working on developing a basic website using Laravel and Vue.js. To ensure that the website is responsive, I integrated Bootstrap 4 into the project. For the most part, everything appears to be functioning correctly - the navbar collapses as ...

The presence of multiple renderings occurring due to Google Maps InfoBox and an AJAX call

I'm encountering a problem with my implementation of the InfoBox and I'm looking for insights on potential solutions. Currently, I have around 1000 client-side markers that are dynamically added to the page. They are created using the following ...

Using the 'client-side rendering' and runtime environment variables in Next.js with the App Router

In the documentation for next.js, it's mentioned that runtime environment variables can be utilized on dynamically rendered pages. The test scenario being discussed involves a Next.js 14 project with an app router. On the page below, the environment ...

Activate scroll event when image src changes in Angular using jQuery

Seeking assistance with utilizing jQuery to scroll to a specific thumbnail inside a modal when left/right arrows are pressed. The modal should appear when the user clicks on an image. I've managed to implement scrolling upon clicking a thumbnail, but ...

Guide on entering text into a concealed text box using WebDriver and Java

When attempting to use sendkeys on an input field, I encountered a warning that puzzled me: org.openqa.selenium.InvalidElementStateException: Element must not be hidden, disabled or read-only (WARNING: The server did not provide any stacktrace informati ...

Issue with downloading files in Internet Explorer is not functioning properly

I am encountering an issue in my Angular.js controller where downloading a CSV file works perfectly in Chrome but not in IE. The browser console log indicates: HTML7007: One or more blob URLs were revoked by closing the blob for which they were create ...

Can we tap into the algorithm of curveMonotoneX in d3-shape?

I'm currently using curveMonotoneX to draw a line in d3 import React from 'react'; import { line, curveMonotoneX } from 'd3-shape'; export default function GradientLine(props) { const { points } = props; const lineGenerator ...

Can you explain the concept of a factory function to me?

As I delve into learning Javascript, I have encountered terms like factory functions and constructor functions in the realm of object-oriented programming. Despite my attempts to grasp the distinction between them, I still find myself struggling to fully ...

A Step-by-Step Guide to Clearing JSON Cache

I'm currently utilizing jQuery to read a JSON file. However, I've encountered an issue where the old values are still being retrieved by the .get() function even after updating the file. As I continuously write and read from this file every secon ...

Is it recommended for Protractor Page Objects to reveal ElementFinder?

Our team is currently debating whether or not to prohibit the exposure of "ElementFinder" and "ElementArrayFinder" in our Page Objects. The main point of contention is a quote by Simon Stewart. Page Objects Done Right - selenium conference 2014 (page.7) ...

Mapping a single JSON object with Knockout JS made easy

As a newbie to knockout and in the process of creating a jquery mobile app, I'm eager to harness the benefits of knockout. After struggling with a simple issue for a day, I resorted to manually binding code by hand, almost negating the use of KO over ...

"Encountering an issue with the Vuex store value not being properly assigned

Recently, I've been facing an issue with my store where I'm encountering a null value intermittently on certain values. If someone could provide some guidance and explain what might be causing this inconsistency, I would greatly appreciate it. He ...

Dynamic form in Ant Design React for calculating total

In my Ant Design dynamic form, I have the capability to input both price and quantity in various rows. I can easily add new rows to the form. Upon submission, I was able to retrieve all the values from the rows using the following code snippet: const o ...

Having trouble retrieving textfield value with jQuery

On my website, I have an invoice.jsp page that requires jQuery to calculate values in textboxes. Within the invoice, there is a quantity textbox. When a user enters a quantity, the price should be dynamically calculated as (total_subPrice= unit_price * qu ...

Tips for displaying the content of a personalized navigation tab using jQuery

I successfully created custom tabs using JQuery. Here is the code for my custom tabs: <div class="row"> <div class="col-4 master-advanced-left-tab master-advanced-left-tab-active"> <p>Item 1</p> </div> < ...

A guide on seamlessly incorporating FlotJs functionalities into a ReactJs application

Having trouble integrating Flot charts into React due to a '$.plot' is not a function error. Here's the code I'm using: Script tags Index.html <script src="dist/libs/js/jquery.min.js"></script> <script src="dist/libs/js ...