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 的按钮，它会打开所有 modal 1 到 7。我怎样才能只调用被点击的那个 modal。

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

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

Answer 1

您可以通过两种方式做到这一点，我推荐的一种是使用 single <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>s，这些<b-modal>s 是在你的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>