为什么在 Vue 中创建时不调用 b-modal？

Question

我想在创建组件但没有发生时调用 b-modal。然而，在单击按钮时，将调用模式。我们该如何解决这个问题？

<template>
  <b-container>
    <button @click="$bvModal.show('modal1')">Show</button>
    <b-modal id="modal1" title="Loading" hide-footer no-close-on-backdrop>
      <p>Preparing the Application, Please wait</p>
    </b-modal>
  </b-container>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    this.showModal();
  },
  methods: {
    showModal() {
      this.$bvModal.show("modal1");
    },
  },
};
</script>

Answer 1

使用 mounted 钩子代替 created。

在调用 created 钩子时，组件还没有模板，所以所有的子组件都还没有实例化。您只能访问道具和初始数据。因此不会做任何事情。

在 mounted 中，您确定所有内容都已实例化，包括 b-modal 组件。所以调用 $bvModal.show() 应该有效:)

Answer 2

当您想与 HTML 元素交互时，最好使用 mounted 钩子。

根据 Vue Lifecycle diagram and the API documentation，在 mounted 钩子中，元素已经呈现（不保证子元素），以便您可以与它们交互。

同时，在 created 挂钩中，您只能访问数据。

简而言之，对于您的情况，mounted 挂钩就是解决方案。

Answer 3

<template>
  <b-container>
    <button @click="$refs.modal1.show()">Show</button>
    <b-modal ref=modal1 id="modal1" title="Loading" hide-footer no-close-on-backdrop>
      <p>Preparing the Application, Please wait</p>
    </b-modal>
  </b-container>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.$refs.modal1.show();
  }
};
</script>

为什么在 Vue 中创建时不调用 b-modal？

why b-modal is not invoked when created in Vue?

bootstrap-modal

vue.js

vuejs2

bootstrap-vue