1

我的视图，其中 filterItems 用于搜索功能。{{ item.arrival }}时间为 12:00 PM 、 1:00 PM 和 1:30 PM{{ post.customerName }}的名称为 David 、 Marco 和 Mario。这是我的视图代码

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

filterItems(post) 的示例数组

帖子：数组[3]

0：对象（名称：'David'，childName：'David Jr'，到达时间：'12:00 PM'）

1：对象（名称：'Marco'，childName：'Marco Jr'，到达时间：'1:00 PM'）

2：对象（名称：'Mario'，childName：'Mario Jr'，到达时间：'1:30 PM'）

如果客户单击 David Name，我如何在 David Name 下方显示 David Jr 的子名。如果他们点击 Marco 的名字，那么它应该在 MARCO 的名字下方显示 MARCO CHILD NAME。

现在，当我单击 David name 时，它​​也会显示 Marco 和 Mario 的子名。

4

1 回答 1

0

尝试这个

<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>
于 2020-04-08T16:44:34.840 回答