CODEWITHSUNDEEP
javascripthtmlcssvue.js
willkn
willkn

Reputation: 43

How would I apply classes to elements that are generated through a loop?

I have created some components through a loop

<li v-for="card in cardID" :key="card">
    <app-profile class="profile" :id="cardID[i++]"></app-profile>
</li>

I want to have a div around all of them so that i can centre the div, but I can't seem to get it working. Any help would be appreciated!

Upvotes: 0

Views: 46

Answers (1)

AndrewL64
AndrewL64

Reputation: 16301

To add a class to the generated list elements, you can use :class="someClassName" like this:

<li v-for="card in cardID" :key="card" :class="someClassName">
    <app-profile class="profile" :id="cardID[i++]"></app-profile>
</li>

And you don't need to wrap a div around the list elements to center them. Just add the center styles to the parent <ul> element instead.

Upvotes: 3

Related Questions