如何在 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 刀片中）

<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

我還調整了元素的鍵，以確保兩個元素的鍵不同。