为什么在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和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>