Javascript 多个v-for从Vue.js中的嵌套JSON数组中获取值

我从外部API获取数据并填充表以显示JSON数据。JSON数据有多个嵌套数组，实际上数据是用于“订单”的。 所以我试图在一个单元格中获取订单的项目，因为我使用的是“v-if”，但我无法将其存档。 下面代码的结果是订单的每一项都在单独的列中，但我试图查看一个单元格中的项目和其他“元数据”

下面是JSON数据结构

“行项目”：[{
“名称”：“萨拉特”，
“元数据”：[{
“id”：11500，
“键”：“大小”，
“值”：“满”
},
{
“id”：1150001，
“钥匙”：“敷料”，
“值”：“绿色”
}
],
“价格”：4.28571399999957941554384888149797916412353515625
},
{
“名称”：“鸡肉”，
“元数据”：[{
“id”：115111112，
“键”：“大小”，
“值”：“正常（7,00€；）”
},
{
“id”：1151111113，
“钥匙”：“额外的酱汁”，
“价值”：“烧烤（0,50€；）”
}
],
“价格”：7.14285700000023379698177450336515903472900390625
},
]

这就是我创建表的方式

订单号
名称
项目
{{order.id}
{{order.billing.first_name+“”+order.billing.last_name}
{{items.name}

我如何将其存档以获取一个单元格中订单项的名称和元数据

建议会有很大帮助

---

感谢您在模板中的

元素上添加

v-for

，这意味着您将为

订单中的每个项目创建一个
。行\u项目

数组。要在单个

单元格中呈现所有这些项目，需要将v-for放入

单元格中。无序列表（

）可能是要使用的适当HTML元素。例如：

<td>
    <ul>
        <li v-for="(items, index) in order.line_items">{{items.name}}</li>
    </ul>
</td>

{{items.name}

---

我已经创建了一个供您参考的文档。

是的，它很有效。谢谢你的回答。有一个问题，我可以用这个方法从“元数据”数组中获取每个项目的“键和值”吗。当使用“order.line\u items.meta\u data”时，我无法理解它。@Tom:As

meta\u data

是一个数组，您需要通过其索引访问该数组中的每个元素，（例如，

order.line\u items[0]。meta\u data[0]

）。或者，您可以在

行项目中嵌套另一个
v-for
。看到这把叉子了吗：谢谢你，我想起来了。我正在尝试访问每个元素，正如您所说，对于特定类别的产品，它有三个不同的eExtras，对于该产品，我不需要在该数组中绘制索引[1]，只需要[2]和[3]，我使用以下代码
{meta[1].value+meta[2].value}
{{meta.value}
，很抱歉继续此操作。我希望这将是一个容易为您点的错误。感谢you@Tom当前位置我不太清楚你想做什么。也许最好发布一个更详细的新问题。例如，比萨饼有3个元数据，其他东西可能有1或2个元数据。对于pizza，我不想显示元数据[0]，只需要元数据[1]和元数据[2]。这就是我正在尝试的