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

Question

我正在使用Bootstrap-Vue模态来打开"编辑"模式时，点击"编辑";按钮，附加到我在v-for渲染列表中渲染的每个项目上。

每次，然而，当我点击编辑按钮，它打开所有的模态，堆叠在彼此的顶部与列表中的最后一个元素是顶部模态。

我如何指定它只打开模态/信息的项目，点击要编辑?

//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"有关。模态1'，但我不确定如何动态设置每个模态的id…是否有一种方法可以轻松地设置每个模态id来匹配item.id?

这是Bootstrap-Vue模态的文档，但是我没有找到我需要的。

Answer 1

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

然后你把你想要编辑的用户/项设置为一个变量，并在你的模态中利用它来显示所选用户的数据。

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>

Answer 2

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

通过将prop/data/var设置为activeModal: 1或n，可以在单击Edit时切换活动模态编号/索引。

然后在你迭代模态的部分，你可以使用v-if指令的模态，如:<v-modal v-if="activeModal">，这将是一种方法来忽略/不渲染其他模态，但将花费在每次编辑点击重新渲染。

最佳/最终解决方案是将内容传送到一个单一的通用模式。