CODEWITHSUNDEEP
javascriptvue.jsvuejs2
calledmaxi
calledmaxi

Reputation: 83

Vuejs array rendering

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?

Upvotes: 1

Views: 79

Answers (1)

HMilbradt
HMilbradt

Reputation: 4639

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!

Upvotes: 2

Related Questions