How to pass dynamic params to Vue router

[dochoss]

I need to be able to pass params along to Vue router when clicking a Toasted action button. I can't seem to find any documentation on how to accomplish this. Here's what I have:

Vue.toasted.register( "showSpecialAlert", payload => { // message if (!payload.holdName) { return "No hold selected"; } return "Generating activity for " + payload.holdName; }, { // options position: "top-center", keepOnHover: true, duration: 5000, action: { text: "View", push: { name: "showHold", // THIS DOESN'T WORK holdId: payload.holdId // NEITHER DOES THIS params: { holdId: payload.holdId } // NO ERROR IN CODE, BUT NOT DYNAMIC AND DOESN'T SHOW UP IN VUE DEV TOOLS params: { holdId: 2 } //// } } } );

Edit: code looks bad here; Replit link: https://repl.it/@BoClifton/Pass-Vue-Router-route-in-global-Toasted

[MrTheSoulz]

same issue, options could maybe be a function like message? we recive payload, extend it and return it back.

[dochoss]

Couple months in, now. Any word on how to do this?

[shakee93]

the push object is vue-router push object. it supports vue router params. take a look at how you can pass params : https://router.vuejs.org/guide/essentials/navigation.html

[MrTheSoulz]

@shakee93

But how do you pass the params tho?

window.Vue.toasted.register(
    'new_specialist_schedule',
    p => {
        let start = global.moment(p.start).format('DD/MM/YYYY HH:mm');
        return `Novo agendamento<br\>De: ${p.user.name}<br\>${start}`;
    },
    {
        duration: 50000,
        position: "top-right",
        iconPack: 'fontawesome',
        icon: 'address-book',
        action: [
            {
                text: 'Ver consulta',
                push: {name: 'specialist.schedules.schedule', params: {}}
            },
        ]
    }
);

window.Vue.toasted.global.new_specialist_schedule({
                user: n.user,
                start: n.start,
                end: n.end,
                schedule: n.schedule_id
            });

I would need:

window.Vue.toasted.register(
    'new_specialist_schedule',
    p => {
        let start = global.moment(p.start).format('DD/MM/YYYY HH:mm');
        return `Novo agendamento<br\>De: ${p.user.name}<br\>${start}`;
    },
    {
        duration: 50000,
        position: "top-right",
        iconPack: 'fontawesome',
        icon: 'address-book',
        action: (payload) => [
            {
                text: 'Ver consulta',
                push: {name: 'specialist.schedules.schedule', params: {schedule: payload.schedule}}
            },
        ]
    }
);

[shakee93]

@MrTheSoulz Hey for this scenario you will need to use the normal toast warapped inside a function.

myToast(payload){
  Vue.toasted.show("my message", {
    // your options here
    action : payload.action
  })
}

// and to call
myToast({
   // your payload
})