Pass Attribute as a Component Parameter in Vue.js

Question

I'm creating a test Component in Vue.js. I want to pass a parameter to use in my template as follows:

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

In my html file:

<test href="/">Tvest</test>

But the property href is not binding to the attribute.

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

How can I do it properly in Vue.js?

Answer 1

You need to get rid of the brackets around href and specify that you are binding a data property by using the v-bind directive:

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

Answer 2

Use the v-bind directive to set the prop:

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

or shortcut

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