Bootstrap-vue 动态吐司不起作用答案

【问题标题】：Bootstrap-vue dynamic toast isn't workingBootstrap-vue 动态吐司不起作用
【发布时间】：2021-02-18 11:34:26
【问题描述】：

我正在尝试使用 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 };

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

TypeError：无法读取未定义的属性“$bvToast”

正如doc 中提到的，我导入了BVToastPlugin，但问题仍然存在。该怎么办？提前致谢。

【问题讨论】：

好吧。正如 shob 回答的那样，我发现另一个有用的解决方案，github.com/bootstrap-vue/bootstrap-vue/issues/6454
我注意到链接答案的问题是，您在要使用 toast 的每个组件中都有一个额外的步骤。您必须：1) 记住将导入的函数添加为方法，或者 2) 记住使用 .bind。我认为这两个选项都没有参数明确的单个函数那么优雅。

标签： vue.js vuejs2 bootstrap-vue

【解决方案1】：

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

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

然后这样称呼它：

notificationToast(this, true);

【讨论】：