CODEWITHSUNDEEP
javascriptvue.jstoast
perrotss
perrotss

Reputation: 33

Vue Toast not showing?

I am trying to add a toast to my code as per below, however no toast message appears and I dont get any errors in the console. The code works however and the invite gets sent. I have used it like this in other files and the toast message appears so im uncertain as to why it wouldn't appear now.

Main.js file where I am importing toast and toast service:

import Toast from 'primevue/toast';
import ToastService from 'primevue/toastservice';

const app = createApp(App);

app.component('Toast', Toast);
app.use(ToastService);

In my file using the toast once an invite is sent if successful I want to display the success message:

<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,
          });
        }
      });
    },
  },

Upvotes: 0

Views: 4283

Answers (1)

Neha Soni
Neha Soni

Reputation: 4684

The ideal location of a Toast is the main application template so that it can be used by any component within the application.

So, you need to use the <Toast> component in your main file (App.vue) like this-

<template>
  <Toast />
<template>

It means the Toast component is mounted while App is loaded into the DOM and it is ready to be displayed upon any event's trigger as you did-

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

For more information, read here- https://primefaces.org/primevue/toast

Upvotes: 3

Related Questions