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

Question

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

<tr>

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

        <th>Qty</th>

        <th>Amount</th>

    @endforeach
</tr>

Answer 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://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt

我还调整了您的元素的键，以确保它们对于这两个元素是不同的。