Vue js showing 2 table value

Question

My array like:

[
{
    "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",
        },
    ]
}
]

Here i want to show:

no--------------offer

ABC　　　　ABC_01

　　　　　　ABC_02

　　　　　　ABC_05

EFG　　　　EFG_01

how can i show that in vue js?

i try before:

<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>

no--------------offer

ABC　　　　ABC_01

ABC　　　　ABC_02

ABC　　　　ABC_05

EFG　　　　EFG_01

but the result not my preferred

What have you tried so far?

Jerodev
– Jerodev

2019-03-12 09:59:17 +00:00
Commented Mar 12, 2019 at 9:59 — Jerodev
– Jerodev, Commented Mar 12, 2019 at 9:59

Shrutika Patil · Accepted Answer · 2019-03-12 10:32:25Z

2

Try the following code:

<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>

answered Mar 12, 2019 at 10:32

Shrutika Patil

5653 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eindbaas · Accepted Answer · 2019-03-12 10:52:05Z

0

One way would be to use the index and only show the ABC/EFG-item when the index equals 0.

edited Mar 12, 2019 at 10:52

answered Mar 12, 2019 at 10:29

Eindbaas

9951 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Vue js showing 2 table value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related