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

Question

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://v2.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']
      }
    ]
  }
})

Jake Lam · Accepted Answer · 2020-05-21 11:39:22Z

3

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>

answered May 21, 2020 at 11:39

Jake Lam

3,4723 gold badges30 silver badges52 bronze badges

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

2 Comments

Al-76 Over a year ago

Your answer works perfectly, so thank you very much. Now I need to try and understand why/how it works. Thanks

Jake Lam Over a year ago

great, glad to help, please mark my answer as answer so that it may help other people when encounter the same problem

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related