带Bootstrap 5的Vue.js(2.x)

原学程将引见戴Bootstrap 五的Vue.js(二.x)的处置办法，这篇学程是从其余处所瞅到的，而后减了1些海外法式员的疑问与解问，愿望能对于您有所赞助，佳了，上面开端进修吧。

成绩描写

我正在测验考试将Bootstrap 五与Vue(二.x)一路应用，而没有应用所有第3圆库。我的设法主意是为我想要应用的每一个Bootstrap组件(没有是全体)创立1个包装器。

我应用以下so线程作为基本：Using Bootstrap 五 with Vue 三

我创立的第1个组件是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 五的Vue.js(二.x)的学程便到这里便停止了，愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野，更多技巧学程不妨在站内搜刮。