在卡片中显示弹出窗口

【问题标题】：Show popup in the card在卡片中显示弹出窗口
【发布时间】：2018-08-10 08:03:00
【问题描述】：

我有一个包含一些数据的对象数组。这些对象显示在我的 UI 中，就像卡片一样。当我点击卡片时，我需要在卡片中显示一些弹出窗口。问题是当我点击所有卡片上的弹出显示时。

<li class="list-group-item" v-for="element in quened" :key="element.id">
  <div class="project">
    {{element.project}}
  </div>
  <div class="project-description">{{element.client}} {{element.price}}$</div>
  <ul class="dots-holder" @click="popup=!popup">
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div class="popup" v-if="popup">Delete</div>
</li>

也许我应该在<li> 上切换课程，但问题是我不知道如何在我点击的<li> 上引用。

【问题讨论】：

你需要将完整的 vuejs 组件放在这里
我的组件太大，不能放在这里。您还需要哪些额外信息？

标签： javascript vue.js vuejs2

【解决方案1】：

您需要跟踪要为其显示弹出窗口的元素的索引。添加数据属性popupIndex：

popupIndex: null

然后添加一个方法showPopup(index):

showPopup(index) {
  if(this.popupIndex === index)
    this.popupIndex = null;        // if you click the same element again, hide popup
  else this.popupIndex = index;    // change popup if you click other element
}

在v-for 中跟踪元素的索引：

<li class="list-group-item" v-for="(element, index) in quened" :key="element.id">

只有当当前列表项的index 等于popupIndex 时，才会显示您的弹出 div：

<div class="popup" v-if="popupIndex === index">Delete</div>

http://jsfiddle.net/eywraw8t/258642/

【讨论】：