How to Use Attributes as Component Parameters in Vue.js

I am currently developing a test Component using Vue.js. I am trying to pass a parameter to be used in my template like this:

Vue.component('test', {
   props: ['href'],
   template: '<li><a href="{{href}}"><slot></slot></a></li>'
});

Here is an example of how I am attempting to use the component in my HTML file:

<test href="/">Test</test>

However, I am facing an issue where the href property is not binding to the attribute as expected.

<li><a href="{{href}}">Test</a></li>

Can anyone provide guidance on how to properly achieve this functionality in Vue.js?

javascripthtmlbindingvue.js

Answer №1

To improve your code, consider removing the parentheses around href and explicitly stating that you are binding a data property using the v-bind directive:

<li><a v-bind:href="href"><slot></slot></a></li>

Answer №2

Utilize the v-bind directive in order to assign the prop:

<a v-bind:href="href"><slot></slot></a>

Alternatively, you can use the shortcut:

<a :href="href"><slot></slot></a>

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

Displaying Material UI Styles: A Challenge

Currently working on a website using Material-UI and React. Strangely, the styling applied through Material-UI's Hook API functions perfectly on codesandbox.io but fails to work when running locally. Notably, the border radius feature fails to update ...

javascriptreactjsmaterial-uistylingcodesandbox

Exploring the Subfolder of Laravel and Vue

Currently, I am working on a project that involves Laravel and VueJS. The Laravel application is nested in a subdirectory (www.dominio.com/subdirectory). I have made adjustments to my Apache vHost settings so that when accessing that specific URL, it redir ...

laravelvue.jslaravel-5

Load the flexslider once the fancybox container is opened

In my experience, I have found flexslider and fancybox to be very useful plugins. Individually, they work perfectly fine on a website that I am currently working on. However, when I tried placing a flexslider gallery inside a fancybox div, I encountered a ...

javascriptjqueryhtmlfancyboxflexslider

What is the best method to securely install a private Git repository using Yarn, utilizing access tokens without the need to hardcode them

My initial thought was to utilize .npmrc for v1 or .yarnrc.yml for v2/3/4, but in all scenarios, Yarn does not even attempt to authenticate with Github. nodeLinker: node-modules npmScopes: packagescope: npmAlwaysAuth: true npmAuthToken: my_perso ...

javascriptnode.jsgitnpmyarnpkg

Execute controller action upon item selection within KODataTable MVC table

I am displaying data in a table using AJAX to call an Action that returns a JSON list. Output: I want each user (row in the table) to be clickable and linkable to an edit page (Admin/Edit/Id). This can be done either by clicking on them or by having an E ...

javascriptjqueryasp.net-mvcknockout.js

Cut off a string from the start

I'm using the text-overflow: ellipsis property in a div to shorten lengthy text values. Since there is no white space in the URL, I want to prevent the overflow from increasing the width of the div. What I want to achieve is to display the following: ...

phpjqueryhtmlcss

Filtering JSON Objects in JavaScript: A Comprehensive Guide

I have been attempting to filter the JSON object below and create an array of objects that have a value containing "steve" in the key 'markdown'. My initial approach involves converting the object to an array then applying a filter. Although I h ...

javascriptjsonfilter

When incorporating @babel/standalone, a JavaScript memory limit is exceeded

I am currently working on a React app that I developed using create-react-app. My main goal is to take user input as code and then evaluate it in order to render the output. Here's what I have attempted so far: import React, { Component } from &apos ...

javascriptreactjsbabeljs

The AJAX call is failing to update the state data in my React component

I've recently delved into ReactJS and encountered an issue regarding setting state while using an AJAX request. The AJAX call successfully communicates with the server, receiving a 200 code response, indicating that the API request functions properly ...

javascriptjqueryajaxreactjses6-module-loader

Is there a way to dynamically fetch and run JavaScript code from the server without resorting to the use of the

In my current project, I am developing a unique PHP framework that empowers PHP developers to effortlessly craft ExtJS interfaces containing forms, grids, tabpanels, and menus exclusively through PHP classes. To illustrate, creating a TabPanel in this fra ...

phpjavascriptajaxextjseval

Tips on making sure video player controls are always visible on an HTML5 video player

Can anyone help me with my HTML video player? I am trying to make the control bar display always, instead of just when hovered over. Any suggestions? ...

javascripthtmljquerycssvideo

What is the best way to delete previously entered characters in the "confirm password" field after editing the password

Is there a way to automatically remove characters in the confirm password field if characters are removed from the password field? Currently, when characters are entered into the password field, characters can also be entered into the confirm password fiel ...

htmlangulartypescript

Submitting an mvc partial view form to send data from the parent view

I am currently working on a MVC 5 App where I have a Parent View that includes a Partial View, allowing users to load images. Upon submitting, the Parent view calls a .Ajax function defined within it, which in turn calls a Method/Controller. My requireme ...

javascriptjqueryajaxasp.net-mvcparentviewcontroller

Utilizing single-use bindings for a unique element directive

I'm working on a new directive called <call-card> and I want to implement one-time bindings as an exercise for optimizing future directives. Here is the definition object for this directive: { restrict: 'E', controllerAs: &ap ...

javascriptangularjsangularjs-directive

Tips for smoothly animating and showing content as the user scrolls to a specific element on the page

Here is a sample template: <template> <div id="Test"> <transition name="fade"> <div class="row" id="RowOne"> <p>Lorem ipsum dolor odit qui sit?</p> </div> ...

javascriptvue.jsvuejs2

Javascript issue: opening mail client causes page to lose focus

Looking for a solution! I'm dealing with an iPad app that runs html5 pages... one specific page requires an email to be sent which triggers the Mail program using this code var mailLink = 'mailto:' + recipientEmail +'?subject=PDFs ...

javascriptioshtmlipadmailer

What is the best way to display CSV file data on an HTML webpage?

I am encountering an issue with displaying the data from my CSV file in an HTML page. Here is a snippet of my CSV file: number:Int,english,french,german 1,one,un,eins 2,two,deux,zwei 3,three,trois,drei 4,four,quattre,four 5,five,cinque,fuenf 6,six,six,sec ...

htmlcsvimport-from-csv

When attempting to download a PDF file from Flask to the client, the file appears to be

I am encountering an issue with my Flask server that sends a PDF file using the send_file function. When testing this route on Postman, I am able to view and download the PDF successfully. However, when attempting to download it through my React frontend, ...

javascriptpythonreactjsflaskaxios

What is the best way to send a string parameter from an Angular UI to a Node.js backend?

My goal is to transfer a string value from an Angular UI to a Node.js backend API, which will then search in MongoDB using the provided string value as shown below. I am attempting to receive input in enteredValue and pass it on to the http.get call as pa ...

javascriptnode.jsangulartypescriptmean-stack

Unable to alter the dimensions of the `symbol` element from an external SVG using CSS, although the other `symbol` within the same document is responsive to styling changes

Could someone help me find the bug in my code related to resizing SVG symbols with CSS? I am able to resize one <symbol> from an external SVG file, but not another <symbol> from the same file. In my CSS, I am trying to change the width and hei ...

htmlsvg