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

2

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!

edited Jul 15, 2022 at 23:35

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 28, 2019 at 23:13

HMilbradt

4,70023 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

Vuejs array rendering

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related