Javascript 同一vue文件中的多个v-for循环

我试图使用api中的三个for循环填充一个表

  const events = await app.$axios.get('/api/events/')
  const markets = await app.$axios.get('/api/markets/')
  const markets = await app.$axios.get('/api/runners/')

我需要确保表行索引是runners，因为runners列的runners比markets多，markets的行比events多

像这样

Event Market
           Runner
           Runner
           Runner
      Market
           Runner
           Runner   

当我尝试在同一个vue文件中执行多个for循环时，会出现此错误

重复属性键

为什么在单独的循环中使用id会导致此错误？ 我的问题是如何根据每行的运行者索引填充表

这是到目前为止我的代码

  <template>
    <div class="course-list-row">
      <th style="width:5%"> Start date </th>
      <th style="width:5%"> Event name</th>
      <th scope="col">Market</th>
      <th scope="col">Runner</th>

      <tr v-for="(event, index) in events" :key=id
          v-for="(market, index) in markets" :key=id
          v-for="(runner, index) in runners" :key=id>
        <td>{{ event.start_time }} </td>
        <td>{{ event.event_name }} </td>
        <td>{{ market.name }} </td>
        <td>{{ runner.name }} </td>

        <td />
      </tr>
    </div>
  </template>

  <script>
    export default {

      async asyncData({
        app
      }) {

        try {
          const events = await app.$axios.get('/api/events/')
          const markets = await app.$axios.get('/api/markets/')
          const runners = await app.$axios.get('/api/runners/')

          return {
            events: events.data.results,
            markets: markets.data.results,
            runners: runners.data.results,
            error: false
          }
        } catch (e) {
          console.log('error', e)
          return {
            events: [],
            markets: [],
            runners: [],
            error: true
          }
        }
      },
    };

  </script>


  <style>
    th,
    td {
      font-family: ‘Lato’, sans-serif;
      font-size: 12px;
      font-weight: 400;
      padding: 10px;
      text-align: left;
      width: 0%;
      border-bottom: 1px solid black;

    }

  </style>

/空气污染指数/街市

{
  "count": 128,
  "next": "http://localhost:8000/api/markets/?page=2",
  "previous": null,
  "results": [{
    "id": 151,
    "market_id": 1273804670840017,
    "market_name": "Moneyline",
    "status": "open",
    "volume": 1107.5453,
    "event": 103
  }]
}

---

键用于在重新渲染时计算DOM中的差异。键在父DOM节点的作用域中必须是唯一的（我猜）

试着在你的键前加上前缀

v-for="(event, index) in events" :key="`event_${id}`" 

编辑： 实际上，原因可能是您的id没有在任何地方定义。用索引替换它

---

此外，您确定可以在同一元素上使用三个循环吗？从来没有尝试过，我总是把东西连在一起。。。有趣的方法

正如评论中指出的，在同一个元素上不可能有多个v-for语句，您需要这样的语句：

<div class="course-list-row">
        <th style="width:5%"> Start date </th>   
        <th style="width:5%"> Event name</th>
        <th scope="col">Market</th>
        <th scope="col">Runner</th>

        <tr v-for="(event, index) in events" :key=id>
            <td>{{ event.start_time }} </td>
            <td>{{ event.event_name }} </td>
            <td></td>
            <td></td>
        </tr>

        <tr v-for="(market, index) in markets" :key=id>
            <td></td>
            <td></td>
            <td>{{ market.name }} </td>
            <td></td>
        </tr>

        <tr v-for="(runner, index) in runners" :key=id>  
            <td></td>
            <td></td>
            <td></td>
            <td>{{ runner.name }} </td>
        </tr>
 </div>

开始日期
事件名称
市场
跑步者
{{event.start_time}
{{event.event_name}
{{market.name}
{{runner.name}

或

为了避免如上所述使用详细模板，您可以将所有三个数组合并为一个数组，其中每个对象都有一个id和一个类型，并按如下方式呈现：

    <tr v-for="(entry, index) in combined" :key=id>
        <td>{{entry.type == 'event' ? event.start_time : ''}} </td>
        <td>{{ entry.type == 'event' ?  event.event_name : ''}} </td>
        <td>{{ entry.type = 'market' ? market.name : ''}}</td>
        <td>{{ entry.type == 'runner' ? runner.name : ''}}</td>
    </tr>

{{entry.type=='event'？event.start_time:'}
{{entry.type=='event'？event.event_name:''}}
{{entry.type='market'？market.name:''}}
{{entry.type=='runner'？runner.name:''}}

虽然我认为这已经包含在评论中，但我将快速回顾原始代码的一些问题

HTML元素不能多次具有相同的属性。虽然Vue模板从技术上讲不是HTML，但它们确实尝试遵循大致相同的解析规则，因此重复的模板将被丢弃。原始代码的

v-for

和

key

属性在

上重复

另一个问题是

键

值。写入

：key=id

将尝试将

键设置为等于名为
id
的属性的值。但是这个属性是在哪里定义的呢？默认情况下，Vue将在Vue实例本身上查找它。我怀疑你的意思是让它使用
事件
、
市场
或
运行者
的
id
属性。为此，您需要编写
：key=“event.id”
等

这个问题确实留下了一些模棱两可的地方，比如你想要实现什么，但下面的代码是我对你想要什么的最好猜测：


newvue({
模板：`
开始日期
事件名称
市场
跑步者
{{event.start_date}
{{event.event_name}
{{market.market_name}
{{runner.runner_name}
`,
el:“#应用程序”，
数据（）{
返回{
活动：[
{
“id”：103，
“事件名称”：“Guilherme Clezar vs Uladzimir Ignatik”，
“开始日期”：“12-11-19”
}, {
“id”：104，
“事件名称”：“事件2”，
“开始日期”：“13-11-19”
}        
],
市场：[
{
“id”：151，
“市场名称”：“货币线”，
“事件”：103
}, {
“id”：152，
“市场名称”：“市场2”，
“事件”：103
}, {
“id”：153，
“市场名称”：“市场3”，
“事件”：104
}
],
跑步者：[
{
“id”：1，
“跑步者名称”：“跑步者1”，
“市场”：151
}, {
“id”：2，
“跑步者名称”：“跑步者2”，
“市场”：151
}, {
“id”：3，
“跑步者名称”：“跑步者3”，
“市场”：152
}, {
“id”：4，
“跑步者名称”：“跑步者4”，
“市场”：153
}
]
}
},
计算：{
（）{
常量市场={}
用于（本项目的const market.markets）{
const event=market.event
市场[事件]=市场[事件]| |[]
市场[事件]。推送（市场）
}
回报市场
},
runnersFor（）{
常数={}
for（此的const runner.runers）{
const market=runner.market
跑步者[市场]=跑步者[市场]
跑步者[市场].推送（跑步者）
}
回程运动员
}
}
})

No Runner是仅次于赛事的最大市场。1。同一元素上不能有多个
v-for
属性，您需要为两个外部循环使用
元素。2.从
：key=id
定义的
id
在哪里？您发布的代码中似乎不存在该错误。问题完全在于错误所在的
重复属性键
，同一元素中有3个
v-for
，这是实际问题，同一元素中不能有多个属性name@skirtle我不熟悉javascript和前端开发。您是否有可能向我展示一个快速解决问题的方法，以便我的循环填充数据？谢谢你的评论。你能举个例子吗
    <tr v-for="(entry, index) in combined" :key=id>
        <td>{{entry.type == 'event' ? event.start_time : ''}} </td>
        <td>{{ entry.type == 'event' ?  event.event_name : ''}} </td>
        <td>{{ entry.type = 'market' ? market.name : ''}}</td>
        <td>{{ entry.type == 'runner' ? runner.name : ''}}</td>
    </tr>