VUE 有没有办法使用 :click 事件在父母姓名下显示孩子姓名？

Posted 2023-02-23

【中文标题】VUE 有没有办法使用 :click 事件在父母姓名下显示孩子姓名？

【英文标题】：Is there a way on VUE to display child name under parents name using :click event?

【发布时间】：2020-07-21 03:23:51

【问题描述】：

我的视图，其中 filterItems 用于搜索功能。 item.arrival 的时间为下午 12:00、下午 1:00 和下午 1:30 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 的子名。

【问题讨论】：

能否在问题中添加filterItems(posts) 的示例数组？

@Rijosh 我刚刚在我的问题上添加了 filterItems(posts) 的示例数组。请你看一下。

【参考方案1】：

试试这个

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

【讨论】：

@Rahman 当我点击父母姓名（DAVID）然后它显示所有父母的孩子姓名。如果他们点击大卫的名字，它假设显示大卫的孩子。