Home » vue » How can you render a sub list in an array using Vue JS?

How can you render a sub list in an array using Vue JS?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am using List Rendering in VueJS to print a list of events from my data. However, for each event there will be a list of sponsors which I would also like to display. I do not see anything in the Vue Documentation which gives an example of this https://vuejs.org/v2/guide/list.html I have tried using the code below but I can’t find a solution.

<div id="app">
  <ul>
      <li v-for="event in events" v-bind:key="events.id">
          <p>{{event.eventName}}</p>
          <ul>
            <li v-repeat="eventSponsors">
              {{event.eventSponsors}}
            </li>
          </ul>
      </li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    events: [
      {
        eventName: 'The Open',
        eventSponsors: ['Honda' , 'IBM']
      },
      { 
        eventName: 'Big Cup',
        eventSponsors: ['Nike' , 'Ben & Jerrys']
      }
    ]
  }
})
Answers:

Try this. You can create another v-for inside each event

<div id="app">
  <ul>
      <li v-for="(event,index) in events" :key="index">
          <p>{{event.eventName}}</p>
          <ul>
            <li v-for="(sponsor,index) in event.eventSponsors" :key="index">
              {{sponsor}}
            </li>
          </ul>
      </li>
  </ul>
</div>