带有 Bootstrap 5 的 Vue.js (2.x)答案

【问题标题】：Vue.js (2.x) with Bootstrap 5带有 Bootstrap 5 的 Vue.js (2.x)
【发布时间】：2021-05-12 17:19:39
【问题描述】：

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

我使用以下 SO 线程作为基础：Using Bootstrap 5 with Vue 3

我创建的第一个组件是 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>

虽然植入/代码几乎相同，但在渲染 Toast 组件时总是出现以下错误：

[Vue 警告]：创建钩子时出错：“TypeError：无法读取属性 '_getConfig' of undefined"

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

[Vue 警告]：挂载钩子错误：“TypeError：无法设置属性 '_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>

【问题讨论】：

标签： javascript vue.js vuejs2 bootstrap-5

【解决方案1】：

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

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

Codeply

【讨论】：