Vue js显示2个表格值

Question

我的数组如下：

[
{
    "id": 01,
    "no": "ABC",
    "offer": [
        {
            "offer_no": "ABC_01",
        },
        {
            "offer_no": "ABC_02",
        },
        {
           "offer_no": "ABC_05",
        }
    ]
},
{
    "id": 02,
    "no": "EFG",
    "offer": [
        {
            "offer_no": "EFG_01",
        },
    ]
}
]

我要在这里显示：

否--------------要约

ABC ABC_01

ABC_02

ABC_05

EFG EFG_01

如何在vue js中显示出来？

我尝试过：

<table>
    <tbody>
        <template v-for="item in array_list">
            <template v-for="offer in item.offer">
                <tr>
                    <th>{{item.no}}</th>
                    <th>{{offer.offer_no}}</th>
                </tr>
            </template>
        </template>
    </tbody>
</table>

否--------------要约

ABC ABC_01

ABC ABC_02

ABC ABC_05

EFG EFG_01

但结果不是我的首选

Answer 1

尝试以下代码：

<table>
    <tbody>
        <template v-for="item in array_list">
            <template v-for="(offer,index) in item.offer">
                <tr>
                    <td><div v-show = "index ==0">{{item.no}}</div></td>
                    <td>{{offer.offer_no}}</td>
                </tr>
            </template>
        </template>
    </tbody>
</table>

Answer 2

一种方法是使用索引，并且仅在索引等于0时显示ABC / EFG项目。