Bootstrap-Vue Modal：如何在 V-For 渲染列表中打开不同的模态？

Question

我正在使用 Bootstrap-Vue Modals 打开一个“编辑”模式，当点击附加到我在 v-for 渲染列表的列表中渲染的每个项目的“编辑”按钮时。

但是，每次当我单击编辑按钮时，它都会打开所有模态框，它们彼此堆叠在一起，列表中的最后一个元素是顶部模态框。

如何指定只打开点击编辑的项目modal/information？

//Parent Component

<div class="dataList">
 <div v-bind:key="item.id" v-for="item in this.$store.getters.data">
    <Child v-bind:item="item"></Child>
 </div>
</div>



//Child Component
<div>
      {{this.item.name}}
      {{this.item.details}}
      {{this.item.completedBy}}
      {{this.item.status}}
      <button v-b-modal.modal-1>Edit</button>
      <button v-on:click="deleteItem">Delete</button>

      <div>
        <b-modal id="modal-1" title="BootstrapVue">
          <form @submit="editItem">
              <input v-model="name">
              <input v-model="details">
              <input v-model="completedBy">
              <select v-model="status">
                  <option>Fail</option>
                  <option>Warn</option>
                  <option>Pass</option>
              </select><br>
              <input type="submit" value="Submit" @click="$bvModal.hide('modal-1')">
          </form>
        </b-modal>
      </div>
  </div>

现在每个模态显示正确的信息（如专有名称、详细信息、状态等），但我只需要特定模态。

我想它与 'v-b-modal.modal-1' 有关，但我不确定如何动态设置每个模态的 id...有没有办法轻松设置每个模态 id 以匹配item.id?

这是 Bootstrap-Vue Modals 的文档，但我找不到我需要的东西。

Answer 1

最快但可能不是最好的方法之一是条件渲染模态。

您可以在单击“编辑”时切换活动模式 number/index，方法是将 prop/data/var 设置为 activeModal：1 或 n。

然后在迭代模态的部分，您可以对模态使用 v-if 指令，例如：<v-modal v-if="activeModal"> 这是 ignore/not 渲染其他模态的一种方式，但需要重新渲染每次点击“编辑”。

Best/Final 解决方案是将内容 vue-portal 到一个通用模式。

Answer 2

我建议将 <b-modal> 移出您的 v-for。这样你就只有一个了。

然后您将要编辑的 user/item 设置为一个变量，并在您的模式中使用它来显示所选用户的数据。

例子

new Vue({
  el: "#app",
  data() {
    return {
      selectedUser: null,
      items: [{
          name: "Name 1",
          status: "Fail",
          details: "Details 1"
        },
        {
          name: "Name 2",
          status: "Warn",
          details: "Details 2"
        }
      ]
    }
  },
  methods: {
    editUser(user) {
      this.selectedUser = user;
      this.$bvModal.show("edit-modal");
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app" class="p-4">
  <div v-for="item in items" class="mt-3">
    {{item.name}} {{item.details}} {{item.status}}

    <b-btn variant="primary" @click="editUser(item)">Edit</b-btn>
    <b-btn variant="danger">Delete</b-btn>
  </div>
  <b-modal id="edit-modal" title="Edit User">
    <form v-if="selectedUser">
      <input v-model="selectedUser.name">
      <input v-model="selectedUser.details">
      <input v-model="selectedUser.completedBy">
      <select v-model="selectedUser.status">
        <option>Fail</option>
        <option>Warn</option>
        <option>Pass</option>
      </select><br>
      <input type="submit" value="Submit">
    </form>
  </b-modal>
</div>

如果您想将模态框保留在 v-for 中，则必须给它一个唯一的 id。如果你的项目有一个我会推荐使用那个，否则你可以使用 v-for 中的 index。

简化示例

<div v-for="item in items">
  <button v-b-modal:[`edit-modal-${item.id}`]>Edit Item</button>
 
  <b-modal :id="`edit-modal-${item.id}`">
    <!-- Modal Content-->
  </b-modal>
</div>

Bootstrap-Vue Modal：如何在 V-For 渲染列表中打开不同的模态？

Bootstrap-Vue Modal: How to open different modals in an V-For rendered list?

bootstrap-modal

vue.js

bootstrap-vue

例子

简化示例