如何在 vuejs 中使用循环包装 2 个或更多 html 元素

【问题标题】：how to wrap 2 html element or more with loop in vuejs如何在 vuejs 中使用循环包装 2 个或更多 html 元素
【发布时间】：2023-03-19 10:28:01
【问题描述】：

我想包装 2 个 html 元素

这是我在vuejs中的代码

<tr>
    <th v-for="(item9,index) in product_all" :key="item9.id"><center>Qty</center></th>
    <th v-for="(item99,index) in product_all" :key="item99.id"><center>Amount</center></th>
</tr>

这就是我想要的（在 laravel 刀片中）

<tr>

    @foreach($dataProduct['byShowTanggal'] as $row)

        <th>Qty</th>

        <th>Amount</th>

    @endforeach
</tr>

【问题讨论】：

标签： javascript php html laravel vue.js

【解决方案1】：

您可以将v-for 挂在<template> 元素上。

<tr>
  <template v-for="item in product_all">
    <th :key="item.id + 'Qty'"><center>Qty</center></th>
    <th :key="item.id + 'Amount'"><center>Amount</center></th>
  </template>
</tr>

<template> 是一个特殊元素，不会创建相应的 DOM 节点。

https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

我还调整了元素的键，以确保两个元素的键不同。

【讨论】：