pass data to component

[mo3auya91]

hello,
I want to show the error message when the post request failed with ehe error message
I want to pass a component to this.$toast.error(my_component,options})

this is my code

import ErrorToast from "@/Pages/Components/ErrorToast"
this.$toast.error(ErrorToast,options})

this works fine if the component has a static message to show.
but how can I pass a props to that component?

I know how to pass props to component inside the template

<error-toast :message="custom message"></error-toast>

but how to pass the custom message to the toast outside the template tag, like in the catch fuction in axios request?

[Maronato]

Hello!

You can pass props (and event listeners) to the rendered component by providing the component as an object:

import ErrorToast from "@/Pages/Components/ErrorToast"

this.$toast.error(
  {
    component: ErrorToast,
    props: {
      message: "custom message",
    },
    listeners: {
      click: () => console.log("Clicked!"),
    },
  },
  options
)

You can read more about it in the docs :)

[mo3auya91]

Thank you, it's amazing. I did not know that I can pass props to a component this way, Thanks again.