php - 访问/读取 html 中的嵌套数据
问题描述
如果这个问题以前经常被回答,我很抱歉,但我已经被这个简单的问题困住了一段时间,所以就这样吧。
我正在开发一个 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>
解决方案
由于 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>
推荐阅读
- django - Django admin list filter 根据两个字段计算字段
- matplotlib - 如何正确使用 matplotlib 的 set_xticks?
- javascript - 如何按属性解开html
- c# - unity DOTween UI 缩放悠悠球效果
- c++ - 如何检测 PE 文件中的 UTF16 字符串
- javascript - 如何使用正则表达式限制位数但允许前面有零
- javascript - 限制滑块的顶部和底部
- react-native - 反应原生地图标记卡动画弹出
- types - Rust:预期类型,发现不透明类型
- javascript - iPad 向下滚动时退出全屏模式