javascript - vue中的嵌套v-for循环

Question

我有以下格式的数据。

orders: [{
  _id: '',
  products: [
    _id: '',
    product: {
      title: '',
      price: ''
    }
  ],
  user: {
    name: '',
    email: ''
  }
}]

我想orders[index].products[index]在我的 Vue 模板的表格行中显示产品数据，我必须使用 2 个嵌套形式的 for 循环。

<tbody>
  <template v-for="(item, index) of orders" :key="index">
  <tr v-for="(prod, j) of item.products" :key="j">
    <td>{{prod.name}}</td>
    <td>$price</td>
    <td>
      qty
    </td>
  </tr>
  </template>
</tbody>

使用上面的代码，我得到模板无法键入的错误。实现解决方案的最佳方法是什么？

标签： javascriptvue.jsvuejs2

Answer 1

正如 Vue 警告所示，<template>s 不能被键入。密钥需要在<template>的根子节点上（即，<tr>在这种情况下）。由于根子 ( <tr>) 已被键入，因此您无需应用另一个密钥。

这里的解决方案是简单地从<template>. 另外，请注意内部v-for迭代orders[].products[]，每个迭代都包含一个字段，由于的唯一性id，这将是比索引更好的键。id

<tbody>
  <!-- BEFORE: -->
  <!-- <template v-for="(item, index) of orders" :key="index"> -->
  <template v-for="(item, index) of orders">

    <!-- BEFORE: -->
    <!-- <tr v-for="(prod, j) of item.products" :key="j"> -->
    <tr v-for="(prod, j) of item.products" :key="prod.id">
    
    ...

    </tr>
  </template>
</tbody>

演示