emit with payload from .vue SFC

[JT3DAI]

Hi guys,

I can't figure out this one so need your help.

I have a .vue SFC widget and I have set up an event that it can emit. I can subscribe to this event on the python side but i can't seem to send a payload with the emitted event. Everything I try is blank on the pythn side.

Is there a simple working example that shows me how t do this. The current example that is in cookiecutter bopiler plate code only c shoes emitting an event but with no payload from the compiled .vu component.

so the example shows this

const triggerClick = () => emit("click");

I assume I can do something like this

const triggerClick = () => {
      const payload = { test: "✅ working", timestamp: Date.now() };
      console.log("🔥 Sending payload", payload);
      emit("click", payload);
};

on the python side I do this but & get the event but no payload

def handle_click(self, *args, **kwargs):
     print("✅ Click Event Triggered:", args, kwargs)

I get this

✅ Click Event Triggered: () {}

I subscribe doing something like this

my_widgets.MaskWidget(
        imageUrl="https://picsum.photos/400/300",                                            
        click=self.handle_click                                    
)

[jourdain]

https://kitware.github.io/trame/guide/intro/getting_started.html#method-calls

[JT3DAI]

Hi Sebastian,

I must be missing something in the link you sent on the method calls. Could you elaborate on what I am doing wrong in my setup.

Like I said I can get the event but I can't get the payload from the .vue component when I use emit inside setup?

[jourdain]

my_widgets.MaskWidget(
        imageUrl="https://picsum.photos/400/300",                                            
        click=(self.handle_click, "[$event]"),
)

[JT3DAI]

Many thanks Sebastien - got it working with your help!!

Can I ask - how I am supposed to know that this was what I needed.

click=(self.handle_click, "[$event]"),

[jourdain]

You wanted to call your function with the event aka arguments using the event. This is the 3rd line in the slide.

[jourdain]

If you can't see the picture, it is also covered in plain text in this cheatsheet section.

Here is a copy/paste of the documentation:

Method binding

Methods can be passed to the events attribute of your UI elements. By default, the function will be called with no arguments.

If you want to control its arguments you can use a tuple where the second entry represents the args and the third represents the kwargs. If you only want to provide args without kwargs, just provide a tuple with 2 entries. $event is a reserved name to represent the event object.

vuetify.VBtn("Click me", click="a = $event"))
vuetify.VBtn("Click me", click=ctrl.do_something))
vuetify.VBtn("Click me", click=(ctrl.do_something, "['hello', $event]"))
vuetify.VBtn("Click me", click=(ctrl.do_something, "[index, $event]", "{ a: 12 }"

[JT3DAI]

super - thanks again for the help

[jourdain]

Normally a beginner should start by readying How to start and then keep the Cheatsheet as reference.