单击按钮时打开模态

Question

我有这个代码：

   <sepa-modal
    ref="sepaModal"
  />
  <b-card
    id="show-btn"
    class="card-modal"
    @click="openSepaModal()"
  >
  </b-card>


  openSepaModal() {
    console.log(this.$refs);
    this.$refs.sepaModal.show();
  },

SepaModal :

<b-modal
class="sepa-modal-edit"
id="sepaModal"
centered
top
no-fade
static
size="lg"
ref="modal"
hide-footer>
...........

我有错误：Error in v-on handler: "TypeError: this.$refs.sepaModal.open is not a function"。我试过 this.$refs.sepaModal.show(); （同样的错误）。很奇怪，因为我放了一个 console.log 而我在 refs 中有 sepaModal。你能帮我吗？提前致谢

Answer 1

this.$refs.sepaModal.$refs.modal.show();

Answer 2

您可以使用不同的（更清洁的 imo）方法。 b-modal 可以通过 v-model 指令来控制。所以你的 SepaModal 应该有一个将接受布尔值的道具，并将其作为 v-model 传递给 b-modal。有了这个，您就不会弄乱组件的实例，并且可以完全控制切换模态的数据

<template>
  <sepa-moda :is-opened="isOpened" />
</template>

<script>
export default {
  /* ... */
  data() {
    return {
      isOpened: false
    }
  }
  methods: {
    openSepaModal() {
      this.isOpened = true
    }
  }
}
</script>

模态：

<b-modal
v-model="isOpened"
class="sepa-modal-edit"
id="sepaModal"
centered
top
no-fade
static
size="lg"
ref="modal"
hide-footer>

单击按钮时打开模态

Open modal when click on button

javascript

vue.js

vuejs2

bootstrap-vue