title: Vue.js how to add index to modal window
body: <p>I have a problem with adding an id to a modal window.
  I have several user cards that are loaded into template from json placeholder.
  There has to be an optin to delete user. When click delete button modal window has to be shown to confirm the action.
  I created a function in vuex store to delete the user, but i can't invoke a modal window specifically for that user.
  Whenever deleted button is clicked, modal windows appear on every user card.
  How do I open a modal only for the card that is being deleted?
  Here is my template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="staff-cards-container"&gt;
    &lt;div class="staff-card" v-for="(staff) in allStaff" :key="staff.id"&gt;
      &lt;div class="header"&gt;
        &lt;div class="employee"&gt;
          &lt;h5&gt;{{staff.name}}&lt;/h5&gt;
          &lt;p&gt;{{staff.company.name}}&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="options-container"&gt;
          &lt;button class="options-btn"&gt;
            &lt;img src="@/assets/dots.svg"&gt;
          &lt;/button&gt;
          &lt;div id="options-content"&gt;
            &lt;router-link to="/staffedit"&gt;
              &lt;button @click="goToEdit()"&gt;
                &lt;img src="@/assets/edit.svg" class="options-icon"&gt; Редактировать
              &lt;/button&gt;
            &lt;/router-link&gt;
            &lt;button class="delete-btn" @click="showModal(staff.id)"&gt;
              &lt;img src="@/assets/del.svg" class="options-icon"&gt;Уволить
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-wrapper"&gt;
            &lt;div class="modal" v-show="isModalVisible" @close="closeModal"&gt;
              &lt;p&gt;Вы уверены что хотите уволить сторудника " {{staff.name}} " ?&lt;/p&gt;
              &lt;div class="confirm-btns"&gt;
                &lt;button
                  @click="(deleteStaff(staff.id)), (activateConfirm = true), (showModal)"
                  class="delete-btn-modal"
                &gt;Да&lt;/button&gt;
                &lt;button @click="closeModal" class="cancel-btn"&gt;Нет&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal" v-if="activateConfirm" @close="activateConfirm=false"&gt;
              &lt;p&gt;Сотрудник " {{staff.name}} " успешно удален&lt;/p&gt;
              &lt;button class="confirm-btns cancel-btn" @click="activateConfirm=false"&gt;ОК&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And script:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { mapGetters, mapActions } from "vuex";
  
  export default {
    name: "stafflist",
    data() {
      return {
        search: "",
        activateConfirm: false,
        isModalVisible: false
      };
    },
    methods: {
      ...mapActions(["fetchStaff", "deleteStaff"]),
      showModal() {
        this.isModalVisible = true;
      },
      closeModal() {
        this.isModalVisible = false;
      }
    },
    computed: {
      ...mapGetters(["allStaff"])
    }
  };
  </code></pre>
  
  <p>Any advice will be appreciated!</p>