Vue.js如何将索引添加到模态窗口

Question

我在向模态窗口添加 id 时遇到问题。 我有几个从 json 占位符加载到模板中的用户卡。 必须有一个删除用户的选项。单击删除按钮时，必须显示模态窗口以确认操作。 我在 vuex 商店中创建了一个函数来删除用户，但我无法专门为该用户调用模式窗口。 每当单击删除按钮时，模式窗口都会出现在每个用户卡上。 如何仅为正在删除的卡打开模式？ 这是我的模板：

<div class="staff-cards-container">
  <div class="staff-card" v-for="(staff) in allStaff" :key="staff.id">
    <div class="header">
      <div class="employee">
        <h5>{{staff.name}}</h5>
        <p>{{staff.company.name}}</p>
      </div>
      <div class="options-container">
        <button class="options-btn">
          <img src="@/assets/dots.svg">
        </button>
        <div id="options-content">
          <router-link to="/staffedit">
            <button @click="goToEdit()">
              <img src="@/assets/edit.svg" class="options-icon"> Редактировать
            </button>
          </router-link>
          <button class="delete-btn" @click="showModal(staff.id)">
            <img src="@/assets/del.svg" class="options-icon">Уволить
          </button>
        </div>
        <div class="modal-wrapper">
          <div class="modal" v-show="isModalVisible" @close="closeModal">
            <p>Вы уверены что хотите уволить сторудника " {{staff.name}} " ?</p>
            <div class="confirm-btns">
              <button
                @click="(deleteStaff(staff.id)), (activateConfirm = true), (showModal)"
                class="delete-btn-modal"
              >Да</button>
              <button @click="closeModal" class="cancel-btn">Нет</button>
            </div>
          </div>
          <div class="modal" v-if="activateConfirm" @close="activateConfirm=false">
            <p>Сотрудник " {{staff.name}} " успешно удален</p>
            <button class="confirm-btns cancel-btn" @click="activateConfirm=false">ОК</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

还有脚本：

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"])
  }
};

任何建议将不胜感激！

Answer 1

上述问题的快速解决方法是：

1. 将isModalVisible:false 更改为selectedId:'' 之类的东西
2. 将 staff.id 传递给 showModal(id) 方法 - 您的代码中缺少该方法。
3. 设置selectedId = id

    showModal() {
        this.selectedId = id;
    }

4. 将v-show="isModalVisible" 更改为v-show="selectedId == staff.id"

Answer 2

我看到你正在使用 boostrap-vue。

boostrap-vue 已经有了使用模态的解决方案see here。

这样你可以通过他们的 id 打开特定的模式。

let app = new Vue({
  el: "#app",
  data: {
    staffs: [
      { id: 1, name : "Bob" },
      { id: 2, name : "Ron" },
      { id: 3, name : "John" },
      { id: 4, name : "Greg" }
      ]
  }
});

<!-- Load Vue followed by BootstrapVue -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <div v-for="staff in staffs" :key="staff.id">
    {{staff.name}}
    <b-btn @click="$bvModal.show(staff.id)" variant="danger">Delete</b-btn>
    <b-modal :id="staff.id" :title="`Delete ${staff.name} ?`">
      Are you sure you want to delete {{staff.name}} ?
    </b-modal>
  </div>
</div>

如果您不想使用此解决方案，@Spiderman 有一个很好的答案。