vue bootstrap 烤面包机立即消失/隐藏自己 [英] vue bootstrap toaster instantly vanishing / hiding itself
问题描述
在我的 Vue Bootstrap (v2.21.2) Web 应用程序中，我想使用 Toasts 向用户显示一些错误.这些错误是由 REST-API 客户端产生的.在我的 vb-components 中，我捕获了这些错误并调用了一个本身使用的函数 https://bootstrap-vue.org/docs/components/toast#toasts-on-demand this.$bvToast.toast() 动态创建和显示错误消息.正如预期的那样，吐司已创建，但会立即再次隐藏自己.我尝试禁用自动隐藏属性并尝试使用无效的超时.由于我在某些子组件中调用此函数，因此我也尝试调用 this.$root.$bvToaster.toast() 但吐司仍然只显示大约 100 微秒左右.
我项目的相关(减少的)代码提取:
App.vue:
<div id="应用程序"><Navbar @viewChanged="view = $event;";/><pki v-if="view == 'pki'";/></模板><脚本>从./components/Navbar.vue"导入导航栏；从 './components/Certificates' 导入 Pki导出默认{数据() {返回 {视图:空}},名称:FooBar"，成分: {导航栏，基},};
Certificates.vue:
<!-- ... --></模板><脚本>//...安装(){this.getCertificates();},方法: {警报(标题，内容，变体 = '危险'){this.$bvToast.toast(内容, {标题:标题，烤面包机: 'b-toaster-bottom-right',变体:变体，固体:真实，appendToast: 真,自动隐藏延迟:10000});},获取证书(){axios.get("/v1/pki/certificates").then((响应) => {//...});}).catch((错误) => {this.alert('API 错误', '获取证书列表失败(' + error.message + ')');console.log('getCertificates(): HTTP ERROR ' + error.response.status + ' (' + error.response.data + ')');});}}我认为您没有合适版本的 bootstrap css.
例如 4.5.3 引导 css并在加载 vue 引导程序后
遇到了同样的问题，解决了
In my Vue Bootstrap (v2.21.2) Web-App i want to use Toasts to present some errors to the user. Those errors are produced by the REST-API-client. In my vb-components i catch those errors and call a function which itself uses https://bootstrap-vue.org/docs/components/toast#toasts-on-demand this.$bvToast.toast() to dynamically create and show the error-message.
As expected the toast is created but will instantly hide itself again. I tried disabling the auto-hide property and play around with the timeout which had no effect. Since i am calling this function in some sub-components i also tried calling this.$root.$bvToaster.toast() but the toasts are still only showing for some 100 microseconds or so.
The relevant (reduced) code-extracts of my project:
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>
Certificates.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>
I think you don't have the appropriate version of the bootstrap css.
e.g 4.5.3 bootstrap css and after load the vue bootstrap
Had the same issue, and this solved it
这篇关于vue bootstrap 烤面包机立即消失/隐藏自己的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
