单击按钮时打开模式

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();
  },

Sepa模态：

<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 并且我在

sepaModal

中有

refs

.

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>