CODEWITHSUNDEEP
vue.jsvuejs2vue-routerrouterrouterlink
magic bean
magic bean

Reputation: 797

Dynamic router link in Vue

I have a cards array and each item has its unique URL.

cards: [
                {
                    id: 0,
                    button: "Tickets for the indoor swimming pool",
                    url: "freibad",
                    src: image1,
                },
                {
                    id: 1,
                    button: "Tickets for the Hangeweiher outdoor pool",
                    url: "hallenbad",
                    src: image2,
                },
                {
                    id: 2,
                    button: "special cards (e.g. bonus, annual and holiday cards)",
                    url: "sonderkarten",
                    src: image3,
                },
            ],

So in for loop, I am trying to display all card:

<div class="card-item col-12 col-md-6 mb-6" v-for="card in cards"
                     :key="card.id">
                    <div class="card">
                        <a v-bind:href="card.url">
                            <img
                                :src="card.src"
                                class="card-img-top"
                                :alt="card.button"
                            />
                        </a>
                        <div class="card-body">
                            <router-link :to="{name: ''}">{{ card.button }}</router-link>
                        </div>
                    </div>
                </div>

But I don't know how to make dynamic this part. {{ card.button }} So basically I want to set the name as freibad for the first card, and hallenbad for the second one, and sonderkarten for the third card. So how do you think I can manage it?

Thanks for the help

Upvotes: 0

Views: 616

Answers (1)

Hani Gerges
Hani Gerges

Reputation: 92

You can try this

  <router-link :to="{ name: card.url }">{{ card.button }}</router-link>

Upvotes: 1

Related Questions