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

Posted 2023-02-22

【中文标题】如何在 vuejs 中使用循环包装 2 个或更多 html 元素

【英文标题】：how to wrap 2 html element or more with loop in vuejs

【发布时间】：2019-11-10 01:29:30

【问题描述】：

我想包装 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>

【参考方案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

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