Create href for each "v-for" using basic list rendering

Question

What is the correct way to add custom href to each link in the list?

For example, i want that link: 'News' would have href="http://example.com/news".

Is there a possible way to do something like that:

{ link: 'News', href: 'http://example.com/news' }

And render it like that:

<a v-bind:href="{{ a.href }}" v-bind:class="[foot]" v-for="a in news">{{ a.link }}</a>

What i have:

JS

var footer = new Vue({
 el: '.footer',
 data: {
    foot: 'footmenu',
    news: [
       { link: 'News', },
       { link: 'Latest' },
       { link: 'Business news' },
       // etc
    ],
    business: [
       { link: 'Vets' },
       { link: 'Companion animal' },
       { link: 'Equine' },
       // etc
    ],
    // etc
});

HTML

<a v-bind:class="[foot]" v-for="a in news">{{ a.link }}</a>

tony19 · Accepted Answer · 2022-07-16 02:17:02Z

1

It should be like following:

<a v-bind:href="a.href" v-bind:class="[foot]" v-for="a in news">{{ a.link }}</a>

as you don't need braces along with v-bind. From the documentation:

Dynamically bind one or more attributes, or a component prop to an expression.

edited Jul 16, 2022 at 2:17

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 6, 2017 at 10:08

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

1 Comment

Tauras Over a year ago

Thanks. It is working. I will accept answer in 10min.

Collectives™ on Stack Overflow

Create href for each "v-for" using basic list rendering

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related