vue中的嵌套v-for循环

Question

我具有以下格式的数据。

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>

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

Answer 1

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

订单列表：

RectToDraw

映射：

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

工作示例： QRectF::setSize

Answer 2

如Vue警告所示，无法键入# -*- coding: utf-8 -*- from odoo.http import Controller,route,request class CallbackNotification(http.Controller): @route('/signature/process/my_odoo', type='json', auth='none') def receive_institution_auth(self, **kw): # When the type='json',the request is the object of JsonRequest,we can get the new attribute stream_str very easy! stream_str = request.stream_str 。密钥必须位于<template>的根子级上（在这种情况下，即<template>）。由于根子级（<tr>）已被设置为密钥，因此您无需应用其他密钥。

这里的解决方案只是从<tr>中删除密钥。另外，请注意，内部<template>迭代v-for，每个迭代都包含一个orders[].products[]字段，由于id的唯一性，它比索引更好。

id

demo