v-for 中的循环模型

Question

我正在尝试在循环中使用 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 link： https://codesandbox.io/s/naughty-knuth-4q82p?file=/src/components/HelloWorld.vue:264-396

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

Answer 1

您可以通过两种方式做到这一点，我推荐的一种是使用单一 <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>

另一种方法很简单，它使用在您的 v-for 中生成的多个 <b-modal>。您给每个模态框一个 唯一的 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>

v-for 中的循环模型

Reccuring modal insde v-for

vue.js

vuejs2

bootstrap-vue

单一模式示例

多模式示例