如何使用 Vue JS 在数组中呈现子列表？

Question

我在 VueJS 中使用列表渲染从我的数据中打印事件列表。但是，对于每项活动，都会有一个赞助商列表，我也想显示这些列表。我在 Vue 文档中看不到任何内容，其中给出了 https://vuejs.org/v2/guide/list.html 的示例我尝试使用下面的代码，但找不到解决方案。

<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']
      }
    ]
  }
})

Answer 1

试试这个。您可以在每个事件中创建另一个 v-for

<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>