Question

我有一个带有一些数据的对象数组。该对象像卡一样显示在我的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>上进行引用。

Answer 1

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

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时，才显示弹出div：

popupIndex

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

在卡片中显示弹出窗口

1 个答案: