Vue.js (2.x) 与 Bootstrap 5

Question

我正在尝试在没有任何第三方库的情况下将 Bootstrap 5 与 Vue (2.x) 一起使用。我的想法是为我想使用的每个 Bootstrap 组件（不是全部）创建一个包装器。

我使用以下 SO 线程作为基础：

我创建的第一个组件是bootstrap.Alert。到目前为止它运行完美。

<template>
  <div ref="el" class="alert alert-danger alert-dismissible fade show" role="alert">
    <div>{{ message }}</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  </div>
</template>

<script>
import { Alert } from 'bootstrap';

export default {
  name: 'BootstrapAlert',
  props: {
    message: {
      type: String,
      default: '',
    },
  },
  created() {
    Alert(this.$refs.el);
  },
  mounted() {
    const { el } = this.$refs;
    [
      'close',
      'closed',
    ].forEach((e) => {
      el.addEventListener(`${e}.bs.alert`, () => {
        this.$emit(e);
      });
    });
  },
};
</script>

第二个是bootstrap.Toast，有点问题：

<template>
  <div ref="el" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">See? Just like this.</div>
  </div>
</template>

<script>
import { Toast } from 'bootstrap';

export default {
  name: 'BootstrapToast',
  created() {
    Toast(this.$refs.el);
  },
};
</script>

虽然implantation/code几乎完全相同，但我在渲染Toast组件时总是出现以下错误：

[Vue warn]: Error in created hook: "TypeError: Cannot read property '_getConfig' of undefined"

如果我尝试在 mounted 事件而不是 created 中移动 Toast 启动，我会收到一个不同的错误：

[Vue warn]: Error in mounted hook: "TypeError: Cannot set property '_element' of undefined"

有人知道哪里出了问题吗？

提前致谢！

=== 可行的解决方案 ===

<script>
import { Toast } from 'bootstrap';

export default {
  name: 'BootstrapToast',
  data() {
    return {
      toast: null,
    };
  },
  mounted() {
    this.toast = new Toast(this.$refs.el);
    this.toast.show();
  },
};
</script>

Answer 1

您需要使用 new Toast(..) 启动 Toast，并确保它在 mounted() 挂钩中...

   mounted() {
        var toast = new Toast(this.$refs.el)
        toast.show()
   },

Codeply

Vue.js (2.x) 与 Bootstrap 5

Vue.js (2.x) with Bootstrap 5

javascript

vue.js

vuejs2

bootstrap-5