Is there a way on VUE to display child name under parents name using :click event?

Question

My View where filterItems is used for search function. {{ item.arrival }} gets time as 12:00 PM , 1:00 PM and 1:30 PM {{ post.customerName }} gets name as David , Marco and Mario. This is my view code

<div v-for="post in filterItems(posts)" v-bind:key="post.id">
  <b-row cols="8" class="bottomRightData">
     <b-col md="2">
        <div v-for="item in post.items" v-bind:key="item.arrival">
            {{item.arrivalTime}}
        </div>
     </b-col>
     <b-col md="3" v-on:click="onDetailDiv = !onDetailDiv">
       {{ post.customerName }}
     </b-col>
 </b-row>
</div>

<b-row cols="8" v-show="!onDetailDiv">
  <b-col md="2"> DAVID CHILD NAME </b-col>
  <b-col md="2"> MARCO CHILD NAME </b-col>
  <b-col md="2"> MARIO CHILD NAME </b-col>
</b-row>

Sample Array for filterItems(post)

posts: Array[3]

0: Object ( name: 'David' , childName: 'David Jr', arrivalTime: '12:00 PM')

1: Object( name: 'Marco' , childName: 'Marco Jr', arrivalTime: '1:00 PM' )

2: Object ( name: 'Mario' , childName: 'Mario Jr', arrivalTime: '1:30 PM' )

How can I display child name of David Jr below David Name , if customer click on David Name's. If they click on Marco name then it should display MARCO CHILD NAME below MARCO's NAME.

Right now when I click on David name , it displays child name for Marco and Mario as well.

Answer 1

try this

<div v-for="post in filterItems(posts)" v-bind:key="post.id">
  <b-row cols="8" class="bottomRightData">
     <b-col md="2">
        <div v-for="item in post.items" v-bind:key="item.arrival">
            {{item.arrivalTime}}
        </div>
     </b-col>
     <b-col md="3" v-on:click="onDetailDiv = !onDetailDiv">
       {{ post.customerName }}
        <b-row cols="8" v-show="!onDetailDiv">
         <b-col md="2" v-for="child in childArr"> {{child}} </b-col>
      </b-row>
     </b-col>
 </b-row>
</div>