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

我正在VueJS中使用列表呈现来打印数据中的事件列表。然而，对于每一个活动，都会有一份赞助商的名单，我也想展示一下。我在Vue文档中没有看到任何关于这方面的示例，我尝试使用下面的代码，但找不到解决方案

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

{{event.eventName}



{{event.event赞助商}




var app=新的Vue({
el:“#应用程序”，
数据：{
活动：[
{
eventName:'打开的'，
活动赞助商：[“本田”、“IBM”]
},
{ 
事件名称：“大杯”，
活动赞助商：['Nike'、'Ben&Jerrys']
}
]
}
})

试试这个。您可以在每个事件中创建另一个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>

事件中的（事件、索引）：key=“index”>
{{event.eventName}



{{发起人}

试试这个。您可以在每个事件中创建另一个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>

事件中的（事件、索引）：key=“index”>
{{event.eventName}



{{发起人}

您的答案非常准确，非常感谢。现在我需要试着理解它为什么/如何工作。谢谢你，很高兴能帮上忙，请把我的答案标记为答案，这样当遇到同样的问题时，它可以帮助其他人。你的答案非常有效，非常感谢。现在我需要试着理解它为什么/如何工作。谢谢，很乐意帮忙，请将我的答案标记为答案，以便在遇到相同问题时帮助其他人