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

Question

我正在尝试使用我的 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/')

我需要确保表行索引是运行者，因为运行者列的运行者比市场多，市场的行比事件多。

像这样。

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>

api 响应具有如下所示的 id 键。

/api/事件

{
  "count": 80,
  "next": null,
  "previous": null,
  "results": [{
    "id": 103,
    "sport_id": "9",
    "event_name": "Guilherme Clezar vs Uladzimir Ignatik",
    "start_date": "12-11-19",
    "status": "open",
    "event_id": 1273804660340017
  }]
}

/api/市场

{
  "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
  }]
}

Answer 1

Key 用于在重新渲染时计算 DOM 的差异。键在父 DOM 节点的范围内必须是唯一的(我猜)。

尝试在您的键前加上一些东西。

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

编辑:其实原因可能是你的 id 没有在任何地方定义。用索引替换它。

此外，你确定你可以在同一个元素上使用三个循环吗？从来没有尝试过，我总是在计算 Prop 中连接东西......有趣的方法!