Vue Toast not showing?

Question

我正在尝试添加toast到我的代码如下所示，但是没有toast消息出现，我没有在控制台中得到任何错误。然而，代码工作，邀请被发送。我在其他文件中这样使用它，toast消息出现，所以我不确定为什么它现在不会出现。

Main.js文件，我在其中导入吐司和吐司服务:

import Toast from 'primevue/toast';
import ToastService from 'primevue/toastservice';
const app = createApp(App);
app.component('Toast', Toast);
app.use(ToastService);

在我的文件中使用toast一旦邀请发送成功，我想显示成功消息:

<template>
<div class="main-container">
<Button @click="sendInvites"/>
</div>
</div>
</template>
<script> 
export default {
data() {
return {
};
},
methods: {
createToast() {
get('CreateInvites', { invites: this.invites.filter((invite) => invite.email.length > 0) }).then((data) => {
if (data.length > 0) {
this.$toast.add({
severity: 'error',
summary: 'Unable to send some invites',
detail: data
})
.join('n'),
life: 9000,
});
}
else {
this.$toast.add({
severity: 'success',
summary: 'Success!',
life: 3000,
});
}
});
},
},

Answer 1

Toast的理想位置是主应用程序模板，以便它可以被应用程序中的任何组件使用。

所以，你需要在你的主文件(App.vue)中使用<Toast>组件，像这样-

<template>
<Toast />
<template>

这意味着Toast组件是在App加载到DOM时挂载的，它准备在任何事件的触发器上显示，就像你所做的那样-

this.$toast.add({
severity: 'error',
summary: 'Unable to send some invites',
detail: data
.map((detail) => {
return `${detail.email}: ${detail.error}`
})
.join('n'),
life: 9000,
})

更多信息，请阅读这里- https://primefaces.org/primevue/toast