【发布时间】：2021-07-06 11:17:42
【问题描述】：
在我的 Vue Bootstrap (v2.21.2) Web 应用程序中，我想使用 Toasts 向用户显示一些错误。这些错误是由 REST-API 客户端产生的。在我的 vb 组件中，我捕获了这些错误并调用了一个函数，该函数本身使用 https://bootstrap-vue.org/docs/components/toast#toasts-on-demand this.$bvToast.toast() 来动态创建和显示错误消息。
正如预期的那样，吐司已创建，但会立即再次隐藏起来。我尝试禁用自动隐藏属性并使用无效的超时。因为我在一些子组件中调用了这个函数，所以我也尝试调用this.$root.$bvToaster.toast()，但 toasts 仍然只显示大约 100 微秒左右。
我的项目的相关（简化）代码摘录：
App.vue：
<template>
<div id="app">
<Navbar @viewChanged="view = $event;" />
<Pki v-if="view == 'pki'" />
</div>
</template>
<script>
import Navbar from "./components/Navbar.vue";
import Pki from './components/Certificates'
export default {
data() {
return {
view: null
}
},
name: "FooBar",
components: {
Navbar,
Pki
},
};
</script>
证书.vue：
<template>
<!-- ... -->
</template>
<script>
// ...
mounted() {
this.getCertificates();
},
methods: {
alert(title, content, variant = 'danger') {
this.$bvToast.toast(content, {
title: title,
toaster: 'b-toaster-bottom-right',
variant: variant,
solid: true,
appendToast: true,
autoHideDelay: 10000
});
},
getCertificates() {
axios.get("/v1/pki/certificates")
.then((response) => {
// ...
});
})
.catch((error) => {
this.alert('API Error', 'failed to fetch certificate list (' + error.message + ')');
console.log('getCertificates(): HTTP ERROR ' + error.response.status + ' (' + error.response.data + ')');
});
}
}
</script>
【问题讨论】：
-
您是否将 Bootstrap AND BootstrapVue CSS 导入到您的项目中？我还会仔细检查您安装了哪个版本的 Bootstrap。
-
啊，是的，我确实这样做了。我不知道为什么。我最初使用 vue-cli 创建了项目骨架。导入'bootstrap/dist/css/bootstrap.css'；导入'bootstrap-vue/dist/bootstrap-vue.css'；导入'bootstrap-vue/dist/bootstrap-vue-icons.min.css';
-
我的问题可能措辞不当。您应该同时导入两者，因此您所拥有的似乎是正确的。接下来是检查您安装的 Bootstrap 版本。
-
明白了。谢谢你的澄清。关于 bootstrap-version 我的 package.json 定义如下： "bootstrap": "^4.6.0", "bootstrap-vue": "^2.21.2",
-
BootstrapVue 不正式支持 Bootstrap
4.6.0，因此您可以尝试降级到4.5.3。不过，我认为这不会解决问题。我在文档 playground 上测试了您的alert方法，并希望在那里工作。
标签： vue.js bootstrap-4 bootstrap-vue