Bootstrap-vue 动态吐司不工作

Question

我正在尝试使用 bootstrap-vue 中的动态 toast。这是我正在尝试做的事情：

<template>
 <b-button @click="handleClick(education)"></b-button>
</template>

<script>
import { notificationToast } from "@/components/NotificationToast";

export default{
 methods:{
  handleClick(){
   notificationToast(true);
 }
}
</script>

NotificationToast.js

import Vue from "vue";
import { BVToastPlugin } from "bootstrap-vue";

Vue.use(BVToastPlugin);

let notificationToast = (append = false) => {
  this.$bvToast.toast(`This is toast`, {
    title: "BootstrapVue Toast",
    autoHideDelay: 5000,
    appendToast: append,
  });
};

export { notificationToast };

每当我点击按钮时，它都会显示错误：

类型错误：无法读取未定义的属性“$bvToast”

如doc所述，我导入了BVToastPlugin，问题依旧。该怎么办？提前致谢。

Answer 1

模块中，this关键字没有引用Vue组件。最简单的解决方法可能是创建第二个参数并传入组件的上下文：

let notificationToast = (vm, append = false) => {
  vm.$bvToast.toast(`This is toast`, {
    title: "BootstrapVue Toast",
    autoHideDelay: 5000,
    appendToast: append,
  });
};

并这样称呼它：

notificationToast(this, true);

Bootstrap-vue 动态吐司不工作

Bootstrap-vue dynamic toast isn't working

vue.js

vuejs2

bootstrap-vue