admin管理员组文章数量:1323330
I'm pretty new to vue.js but I could figure out some things. I started with normal js but switched to typescript with class style vue ponents now. For ponents styling I use bootstrap-vue.
in my main.ts file I imported bootstrap as well as the vuex store
...
import BootstrapVue from 'bootstrap-vue'
//use custom bootstrap styling
import '../src/bootstrap/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
...//some more code
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
In the store I dynamically register a NotificationModule
NotificationModule.ts
//import node modules
import { Module, VuexModule, Mutation, Action } from "vuex-module-decorators";
import { store } from "@/store";
//import application modules
import i18n from '@/i18n';
import Notification from '../types/Notification';
import Message from '../types/Message';
import logger from '@/system/logger';
@Module({
dynamic: true,
store: store,
name: "notification",
namespaced: true,
})
export default class NotifcationModule extends VuexModule {
//notification types definition with according prompts
notificationTypes: Array<string> = ['info', 'success', 'warning', 'danger'];
//definition of the notification object
notification: Notification = {
variant: '',
prompt: '',
message: ''
}
/**
* prove the supported notification types
*/
get getSupportedNotificationTypes(): Array<string> {
return this.notificationTypes;
}
/**
* provide the notification
*/
get getNotification(): Notification {
return this.notification;
}
@Action
notify(msg: Message){
logger.warn(`called notify with [type:${msg.variant}]:[text:${msg.text}]`);
if(msg.variant === undefined || !Array.from(this.notificationTypes).includes(msg.variant)){
msg.variant = 'info';
}
//configure custom notification data
const notification = {
variant: msg.variant,
prompt: i18n.t(`notify.${msg.variant}`),
message: msg.text || 'No message provided.'
}
this.contextmit('setNotification', notification);
}
@Mutation
public setNotification(data: Notification) {
if (data) {
this.notification = data;
}
}
}
that all works. I can get an instance of this store in the vue-ponent that produces the notifications but I have a problem by creating a toast in the following vue ponent.
Notification.vue
<template>
<b-container></b-container>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { getModule, VuexModule } from 'vuex-module-decorators';
import NotificationModule from '../../util-notification/ponents/NotificationModule';
import Notification from '../types/Notification';
import logger from '../../../system/logger';
@Component
export default class UserNotification extends Vue {
//get the instance of the NotificationModule
noticationInstance: NotificationModule = getModule(NotificationModule);
//watch the property 'notification' -> accessed via getter method
@Watch('noticationInstance.getNotification')
onPropertyChange(notification: Notification, oldValue: string) {
logger.debug(`replaced [${JSON.stringify(oldValue)}] by [${JSON.stringify(notification)}]`);
//create a toast
this.$bvToast.toast(notification.message, {
title: notification.prompt || 'Info',
variant: notification.variant || 'warning',
solid: true
});
}
}
</script>
here in the file Vetur gives me the following error although it piles. But no toasts were produced and shown.
Property '$bvToast' does not exist on type 'UserNotification'.Vetur(2339)
I have created a TestView where I integrated the $bvToast differently and there it works.
<template>
<b-container fluid>
<h1>This is the page for testing ponents and functionality</h1>
<hr>
<div>
<h3>Trigger für vuex notification test</h3>
<b-button @click="$bvToast.show('example-toast')" class="mb-2">Default</b-button>
</div>
<b-toast id="example-toast" title="BootstrapVue" static no-auto-hide>
Hello, world! This is a toast message.
</b-toast>
</b-container>
</template>
Do you have any suggestions about what I am doing wrong? Thanks you
Problem solved or better it works
I don't really know why but it works now! without further changes. Sorry I can't reproduce this anymore. Also webconsole also doesn't show any errors.
So it seems I can access the vue instance within my UserNotification ponent. UserNotification extends Vue so it is a Vue instance not VueX. The discribed solution from the answer was not neccessary.
Is t possible tha only Vetur doesn't recognize the the $vbToast as a property of the UserNotification or even the extended Vue instance in the typscript context?
I'm pretty new to vue.js but I could figure out some things. I started with normal js but switched to typescript with class style vue ponents now. For ponents styling I use bootstrap-vue.
in my main.ts file I imported bootstrap as well as the vuex store
...
import BootstrapVue from 'bootstrap-vue'
//use custom bootstrap styling
import '../src/bootstrap/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
...//some more code
new Vue({
router,
store,
i18n,
render: h => h(App)
}).$mount('#app')
In the store I dynamically register a NotificationModule
NotificationModule.ts
//import node modules
import { Module, VuexModule, Mutation, Action } from "vuex-module-decorators";
import { store } from "@/store";
//import application modules
import i18n from '@/i18n';
import Notification from '../types/Notification';
import Message from '../types/Message';
import logger from '@/system/logger';
@Module({
dynamic: true,
store: store,
name: "notification",
namespaced: true,
})
export default class NotifcationModule extends VuexModule {
//notification types definition with according prompts
notificationTypes: Array<string> = ['info', 'success', 'warning', 'danger'];
//definition of the notification object
notification: Notification = {
variant: '',
prompt: '',
message: ''
}
/**
* prove the supported notification types
*/
get getSupportedNotificationTypes(): Array<string> {
return this.notificationTypes;
}
/**
* provide the notification
*/
get getNotification(): Notification {
return this.notification;
}
@Action
notify(msg: Message){
logger.warn(`called notify with [type:${msg.variant}]:[text:${msg.text}]`);
if(msg.variant === undefined || !Array.from(this.notificationTypes).includes(msg.variant)){
msg.variant = 'info';
}
//configure custom notification data
const notification = {
variant: msg.variant,
prompt: i18n.t(`notify.${msg.variant}`),
message: msg.text || 'No message provided.'
}
this.context.mit('setNotification', notification);
}
@Mutation
public setNotification(data: Notification) {
if (data) {
this.notification = data;
}
}
}
that all works. I can get an instance of this store in the vue-ponent that produces the notifications but I have a problem by creating a toast in the following vue ponent.
Notification.vue
<template>
<b-container></b-container>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import { getModule, VuexModule } from 'vuex-module-decorators';
import NotificationModule from '../../util-notification/ponents/NotificationModule';
import Notification from '../types/Notification';
import logger from '../../../system/logger';
@Component
export default class UserNotification extends Vue {
//get the instance of the NotificationModule
noticationInstance: NotificationModule = getModule(NotificationModule);
//watch the property 'notification' -> accessed via getter method
@Watch('noticationInstance.getNotification')
onPropertyChange(notification: Notification, oldValue: string) {
logger.debug(`replaced [${JSON.stringify(oldValue)}] by [${JSON.stringify(notification)}]`);
//create a toast
this.$bvToast.toast(notification.message, {
title: notification.prompt || 'Info',
variant: notification.variant || 'warning',
solid: true
});
}
}
</script>
here in the file Vetur gives me the following error although it piles. But no toasts were produced and shown.
Property '$bvToast' does not exist on type 'UserNotification'.Vetur(2339)
I have created a TestView where I integrated the $bvToast differently and there it works.
<template>
<b-container fluid>
<h1>This is the page for testing ponents and functionality</h1>
<hr>
<div>
<h3>Trigger für vuex notification test</h3>
<b-button @click="$bvToast.show('example-toast')" class="mb-2">Default</b-button>
</div>
<b-toast id="example-toast" title="BootstrapVue" static no-auto-hide>
Hello, world! This is a toast message.
</b-toast>
</b-container>
</template>
Do you have any suggestions about what I am doing wrong? Thanks you
Problem solved or better it works
I don't really know why but it works now! without further changes. Sorry I can't reproduce this anymore. Also webconsole also doesn't show any errors.
So it seems I can access the vue instance within my UserNotification ponent. UserNotification extends Vue so it is a Vue instance not VueX. The discribed solution from the answer was not neccessary.
Is t possible tha only Vetur doesn't recognize the the $vbToast as a property of the UserNotification or even the extended Vue instance in the typscript context?
Share edited Jan 23, 2020 at 15:45 MichaelT asked Jan 22, 2020 at 17:55 MichaelTMichaelT 811 gold badge2 silver badges7 bronze badges1 Answer
Reset to default 6The this
context of VueX is not a Vue instance, so this.$bvToast
is not available directly.
There is a workaround however to access the main Vue instance within VueX. Use this._vm.$bvToast
instead.
See:
- https://github./vuejs/vuex/issues/1399
- https://github./bootstrap-vue/bootstrap-vue/issues/3502
本文标签: javascriptHow to access bvToast in vue class componentStack Overflow
版权声明:本文标题:javascript - How to access $bvToast in vue class component - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742140122a2422545.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论