support router-link in toasts

[miladr]

Please add support of router-link in toasts. For example when creating a user named "Milad", toast text should be "User Milad created successfully" and "Milad" should be linked to "users/10".

[shakee93]

You can use this.$router.resolve({ name : 'your-route-name', params : { user_id : 10 } }).href to get the url of the route. take a look at official docs here router.resolve : http://router.vuejs.org/en/api/router-instance.html

[miladr]

I know that but using <a href="/users/10">Milad</a> causes page refresh.

[shakee93]

Oh yes !! that will be a problem. the toast doesnt use the vue template engine it just uses plain javascript to build the html content. ill take a look if that is possible to make the component work.

although on your case you can attach an event listener to the <a> and use the vue-router push method to navigate to the location.

let toast = this.$toasted
    .show('<p>User <a href="">Milad</a> Successfully Created !!</p>');

toast.el
    .getElementsByTagName('a')[0]
    .addEventListener('click', (e) => {
        e.preventDefault();

        // in here redirect the user via $router
})

hope that helps. PR's are always welcome

[miladr]

Do you think using "slot" is an option?

[shakee93]

Yeah it can be option if it is built via the vue template engine. but the toast is generated by plain javascript. thats the problem.

[shakee93]

and also please take a look at globalToasts feature. if the problem is reusing the toast again and again with that large code. this might help to resolve it.

https://github.com/shakee93/vue-toasted#reusable-global-toasts