时间戳

首页 > 解决方案 > 重复模态 insde v-for

vue.js - 重复模态 insde v-for

问题描述

我正在尝试在循环内使用 bootstrap-vue 模态，例如：

<b-list-group-item v-for="item in items" :key="item">
      <b-button v-b-modal.example-modal>{{ item }}</b-button>
      <b-modal id="example-modal">
        <p>{{ item }}</p>
      </b-modal>
    </b-list-group-item>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7],
    };
  },
};
</script>

这里的问题是，每当我单击一个按钮时，它都会打开 7 个模态（循环内的每个人）。例如，如果我单击包含 3 的按钮，它会打开所有模态 1 到 7。我怎样才能只调用被单击的模态。

为方便起见，这里是codesandbox链接： https ://codesandbox.io/s/naughty-knuth-4q82p?file=/src/components/HelloWorld.vue:264-396

请注意，我需要在循环内使用模态，因为我必须将一些数据传递给与v-for. 谢谢是提前！

标签： vue.jsvuejs2bootstrap-vue

解决方案

您可以通过两种方式执行此操作，我推荐的一种是使用单个 <b-modal>，而是将“单击”项分配给可用于显示所需信息的数据属性。

单模态示例

new Vue({
  el: "#app",
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7],
      selectedItem: null
    }
  }
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-list-group-item v-for="item in items" :key="item">
    <b-button v-b-modal.example-modal @click="selectedItem = item">{{ item }}</b-button>
  </b-list-group-item>
  <b-modal id="example-modal">
    <p>{{ selectedItem }}</p>
  </b-modal>
</div>

另一种方法非常简单，它使用<b-modal>在您的v-for. 你给每个模态一个唯一的ID，然后在v-b-modal指令中使用这个 ID。

多模态示例

new Vue({
  el: "#app",
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7]
    }
  }
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-list-group-item v-for="item in items" :key="item">
    <b-button v-b-modal:[`example-modal-${item}`]>{{ item }}</b-button>
    <b-modal :id="`example-modal-${item}`">
      <p>{{ item }}</p>
    </b-modal>
  </b-list-group-item>
</div>

推荐阅读