带Bootstrap 5的Vue.js(2.x) [英] Vue.js (2.x) with Bootstrap 5

问题描述

我正在尝试将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 warn]：创建的钩子中出错：TypeError：无法读取属性 未定义的‘_getConfig’

如果我尝试在已装载事件中移动Toast启动，而不是已创建，则收到不同的错误：

[Vue warn]：装载的钩子中出错：TypeError：无法设置属性 未定义&q；的‘_Element’

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

提前谢谢！

=工作解决方案=

<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>

Toast

您需要使用new Toast(..)启动推荐答案，并确保它位于已挂载的()钩子中...

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

Codeply

这篇关于带Bootstrap 5的Vue.js(2.x)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！