Vue.js: The href attribute in a link is different from the data

Having <a> href tag below, clicking will redirect to

www.duckduckgo.com, with the value of page.publicWebsite being displayed as well.

{{page.publicWebsite}} shows www.duckduckgo.com. Is everything functioning correctly?

https://i.stack.imgur.com/2HpTr.png

However, upon clicking the link, it redirects me to https://mywebsite/currentpage/www.duckduckgo.com

<a v-if="page.publicWebsite" target="_blank" :href="page.publicWebsite" :title="page.publicWebsite">{{page.publicWebsite}}<img src='/img/layout/icon-www.png' class='userInfoIcons' /></a>
javascriptvue.jshref

Answer №1

The reason for this is that the href attribute interprets your URL as a relative path. To ensure it is treated as an absolute URL, you can declare it in one of two ways:

page.publicWebsite = 'https://www.duckduckgo.com'
// or
page.publicWebsite = '//www.duckduckgo.com'

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

What is the best way to send data to my Vue.js component?

I am currently developing a Vue.js repeatable component that enables users to perform multiple tasks, such as entering a question and selecting the answer type from a drop-down menu. The challenge I am facing is related to displaying a specific number of b ...

vue.jscomponents

Choose a node from descendants based on its attribute

I am working with an interface that switches between displaying different div elements. Each div element has their children arranged differently, and when the switch happens, I need to access a specific child node of the newly displayed div. However, I fin ...

javascripthtmlcss

How to implement a scrollbar for tables using Angular

How can I implement a vertical scroll bar only for the table body in my Angular code? I want the scroll bar to exclude the header rows. Since all rows are generated by ng-repeat, I am unsure how to add overflow style specifically for the table body. Here ...

javascripthtmlcssangularjs

Mastering Vue3: Typed Component Instance Template Refs with Exposed Methods

In my project, I am working with a component called A that has a method called send. Here is an example of how Component A is structured in A.vue: <script setup lang="ts"> function send(data: string) { console.log(data) } defineExpose({ ...

typescriptvue.jsvuejs3vue-script-setup

Revamp local route variables in Express.js without the need for a page refresh

Currently, I am working on a project using node.js along with the express.js framework and EJS for template handling. Below is my routing code: app.get('/',function(req,res) { res.render('index', { matches: [], status_messag ...

javascriptjqueryajaxnode.jsexpress

Managing input/output requests on Amazon EC2 instances

Having mastered node, javascript, and other technologies the hard way, I am finally on the brink of releasing my debut web application. After signing up for Amazon Web Services and setting up a micro instance to take advantage of the first year's free ...

javascriptnode.jsamazon-web-servicesioamazon-ec2

Angular seems to be experiencing issues with maintaining context when executing a function reference for a base class method

Imagine we have CtrlOne that extends CtrlTwo, with a componentOne instantiated in the template of CtrlOne. Here is some code to illustrate the issue: class CtrlOne extends CtrlTwo { constructor() { super(); } } class CtrlTwo { sayMyName(name: st ...

javascriptangularjstypescript

Simultaneously updating the states in both the child and parent components when clicked

In my code, I have two components: the parent component where a prop is passed in for changing state and the child component where the function is called. The function changes the state of the parent component based on an index. changeState={() => this ...

javascriptreactjssetstate

Trigger a JavaScript function after Angular has completed its process

Once all data binding is completed and there are no more tasks for the Angular javascript to perform, I need to execute a function that toggles the display of certain divs. Attempted Solutions I want to avoid using timeouts: The timing of Angular's ...

javascriptangularjs

When creating a FlipCard, you may encounter the error message "The object may be null" while using the document.querySelector() method

Having trouble creating a flipcard on Next.js with tsx. The querySelector('.cardflipper') doesn't seem to locate the object and I keep getting this error: "Possibly the object is null". Does anyone know a solution to help my method recognize ...

javascripthtmlcssnext.js

Execute a jQuery function every time the class of the parent container div changes

I am seeking to trigger the function below whenever its containing div parent <div class="section">...</div> transitions to an "active" state, for example: <div class="section active">...</div> $(".skills-grid__col").each(function ...

javascriptjqueryhtmlcss

Discover the ins and outs of integrating YAML front matter into your destination directory path

I am looking to customize the path of my blog posts to include a fancy date format like /blog/2013/09/17 so that the links from my previous octopress blog remain intact. Within the YAML front matter on each markdown page, I have included the date informat ...

javascriptgruntjspermalinkstemplatingassemble

The table element fails to display in IE11 due to a rendering issue, displaying the error message: "Render error - TypeError: Object does not support the property or method 'entries'"

As someone new to web app development, I am currently working on a project that involves using Vue cli and antd components, with the additional challenge of ensuring compatibility with IE11. However, I have encountered an issue where IE11 does not render ...

javascriptvue.jsinternet-explorer-11antd

Create a sequence of reactions using Selenium WebDriver

I am looking to gather a set of responses while browsing a website, and then "recreate" the process using those responses. Upon exploring an different discussion, I stumbled upon this method for rendering HTML: content = requests.get("https://stackoverfl ...

javascriptpythonseleniumselenium-webdriver

A step-by-step guide on implementing the bootstrap paginator library to paginate PHP echoed data

I'm currently working on a project that involves displaying data from a database in a table. To make the data paginated on the client side, I decided to use the bootstrap paginator library available at: Below is the code I'm using: In my header ...

javascriptphpjqueryhtmltwitter-bootstrap

What is the best way to transfer a list from aspx to javascript?

When populating a table by looping through a list, I aim to pass a row of data to my JavaScript code. If that's not an option, I'd like to pass the list and the ID number for the specific row. How can I achieve this? <%foreach(var item in Mod ...

c#.netjavascriptasp.net-mvc

What is causing the 'Invalid Hook Call' error to appear in React?

I have recently started learning React and I am currently working on converting a functional component into a class component. However, I encountered an error message that says: Error: Invalid hook call. Hooks can only be called inside of the body of a fu ...

javascriptreactjsecmascript-6

Vue: Uncaught TypeError: Unable to access property ... from a value that is not defined

I am utilizing [email protected] and the official Vue Webpack template to develop an application. During local development, I frequently encounter the warning Uncaught TypeError: Cannot read property ... of undefined, although the HTML renders succes ...

vue.jsvue-componentnetlify

Why is it that when I refresh a page on localhost, the file download gets stuck until I close the page?

As I work on my HTML/JS files hosted on localhost with Node, I've noticed that when I make changes to the code, Webpack automatically rebuilds the JS files. However, there are times when, after making updates and trying to refresh the page, the downl ...

javascriptnode.jsgoogle-chromebrowser

Using React Hooks to render radio buttons within a map iteration

My code contains a nested map function where I try to retrieve values from radio buttons. However, the issue is that it selects all radio buttons in a row instead of just one. Below is the snippet of my code: <TableHead> <TableRow> ...

javascriptreactjsmaterial-uireact-hook-form