VueJS: using variable in href

Question

I have an item.channelId that I have like to use in href. It should achieve something like this:

          <a :href="https://youtube.com/${item.channelId}">{{
            item.channelTitle
          }}</a>

How can I put item.channelId into href?

use this syntax: :href="`https://youtube.com/${item.channelId}`" — Igor Moraru
– Igor Moraru, Commented Sep 17, 2020 at 13:05

Nitheesh · Accepted Answer · 2020-09-17 13:18:47Z

5

Try using

 <a :href="'https://youtube.com/'+item.channelId">{{item.channelTitle}}</a>

In the above example the property value href is treated as the string sum of 'https://youtube.com/' and the value in the variable item.channelId

If you want to make use of template literals, try

<a :href="`https://youtube.com/${item.channelId}`">{{item.channelTitle}}</a>

In case of template literals, the variable values are written inside ${} syntax and the entire string will be enclosed inside backticks (` `)

edited Sep 17, 2020 at 13:18

answered Sep 17, 2020 at 13:05

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yves Kipondo · Accepted Answer · 2020-09-17 13:06:03Z

2

You can use backtick to escabe variable inside of a string like this

<a :href="`https://youtube.com/${item.channelId}`">
    {{item.channelTitle}}
</a>

answered Sep 17, 2020 at 13:06

Yves Kipondo

5,6931 gold badge22 silver badges33 bronze badges

Comments

ireneo-cobarjr · Accepted Answer · 2020-09-17 13:18:31Z

1

It should be:"`https://youtube.com/${item.channelId}`" with backticks.

You can check here: Template Literals

I think you are trying to use Template Literals. You should surround your string with backticks for it to work and not just "".

Everything inside backticks will be considered a string aside from anything with ${variable-name} will be considered a variable.

edited Sep 17, 2020 at 13:18

answered Sep 17, 2020 at 13:12

ireneo-cobarjr

272 bronze badges

Collectives™ on Stack Overflow

VueJS: using variable in href

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related