Vuejs array rendering

Question

I am using Vuejs for my project and I want to display a array. This is the data :

data() { return { people: [ {"name": "Emily","properties": ["nice","good"]}, {"name": "John","properties": ["bad","not good"]} ] } }

So I want that this data should be displayed like this :

<ul> <li>Emily : <p>- nice</p><p>- good</p></li> <li>John : <p>- bad</p><p>- not good</p></li> </ul>

And my question is how can I do this in Vuejs dynamically?

tony19 · Accepted Answer · 2022-07-15 23:35:44Z

Use a v-for:

<ul> <li v-for="(person, i) in people" :key="i">{{ person.name }} : <p v-for="(property, j) in person.properties" :key="j">- {{ property }}</p> </li> </ul>

The second values in each v-for, i and j are the index of the current element. We're specifically using it here to bind to the key property, which helps prevent rendering issues.

Hope this helps!

Collectives™ on Stack Overflow

Vuejs array rendering

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related