[Vuejs]-Show popup in the card

by

0👍

✅

You need to track the index of element for which you want to show popup for.
Add a data property popupIndex:

popupIndex: null

Then add a method 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
}

Keep track of element’s index in your v-for:

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

And your popup div should be displayed only when current list item’s index equals to popupIndex:

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

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

Leave a comment