vue中的嵌套v-for循环答案

【问题标题】：nested v-for loop in vuevue中的嵌套v-for循环
【发布时间】：2020-09-01 07:45:04
【问题描述】：

我有以下格式的数据。

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

我想在我的 Vue 模板的表格行中显示来自 orders[index].products[index] 的产品数据，我必须使用 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>

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

【问题讨论】：

vuejs.org/v2/guide/render-function.html
是的，你不能将 :key 属性放到模板中，而是使用 div 或其他 html 元素。
对于您的情况，我会使用多个 tbody（将 v-for 放在 tbody 中），或者为每个订单使用单独的表格。

标签： javascript vue.js vuejs2

【解决方案1】：

您的订单列表中似乎有错误。您可以更改列表以包含产品列表，然后可以通过 v-for 映射访问该列表。

订单清单：

orders: [
  {
    _id: "0132asd943",
    products: [
      {
        _id: "3i412e39",
        title: "Porduct 1",
        price: "239"
      },
      {
        _id: "kad83423",
        title: "Porduct 2",
        price: "699"
      }
    ],
    user: {
      name: "user1",
      email: "user1@mail.com"
    }
  }
]

映射：

<div v-for="item in orders" v-bind:key="item.id">
  <li>{{item.products[0]}}</li>
  <li>{{item.products[1]}}</li>
</div>

工作示例： codesandbox

【讨论】：

【解决方案2】：

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

demo

【讨论】：