访问/读取 html 中的嵌套数据答案

【问题标题】：Accessing / reading nested data in html访问/读取 html 中的嵌套数据
【发布时间】：2021-04-29 09:10:55
【问题描述】：

如果这个问题以前经常被回答，我很抱歉，但是我已经被这个简单的问题困了一段时间了，所以就这样吧。

我正在开发一个 php vue 项目，我在其中以 html 显示一些数据。

我有一个包含 ID、客户、日期等的订单对象。在订单中有一个产品对象，其中包含价格名称等字段。我想显示产品的金额字段。有什么简单的方法可以做到这一点是html？

我的订单对象：

$order = new Order(
            $pOrder->id,
            $pOrder->deliveryName,
            $pOrder->deliveryContactName,
            $pOrder->deliveryAddress,
            $pOrder->deliveryZipcode,
            $pOrder->deliveryCity,
            $pOrder->deliveryCountry,
            $pOrder->invoiceName,
            $pOrder->invoiceContactName,
            $pOrder->invoiceAddress,
            $pOrder->invoiceZipcode,
            $pOrder->invoiceCity,
            $pOrder->invoiceCountry,
            $pOrder->emailAddress,
            $pOrder->phoneNumber,
            $pOrder->createdAt,
            $pOrder->calculateVAT,
            $products,
            $productTags,
            null

我的产品对象：

$product = new Product(
                $orderProduct->id,
                $orderProduct->name,
                $orderProduct->price,
                $orderProduct->amount,
                $orderProduct->weight,
                $tags

我的 HTML 代码：

<tr v-for="(order, index) in orders"
                            v-bind:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.id}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{order.deliveryName}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.createdAt}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.products}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                € 150
                            </td>
                        </tr>

【问题讨论】：

我猜每个订单都有很多产品，所以order.products 显示的是一个json。您必须使用 v-for 遍历产品

标签： php html json vue.js nested

【解决方案1】：

由于 products 是一个数组，你需要一个 for 循环来迭代它

    <tr v-for="(order, index) in orders"
                            v-bind:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.id}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{order.deliveryName}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{order.createdAt}}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">

<!-- for loop to iterate over it -->
                               <span v-for="(product, index) in order.products">
                                  {{product.price}}
</span>



                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                € 150
                            </td>
                        </tr>

【讨论】：