Py.Cafe
Vue template event emit data
- app.py
- custom.vue
- requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import solara
import json
from typing import Callable
counter = solara.reactive(0)
@solara.component_vue("custom.vue")
def Custom(label: str, event_on_click: Callable):
...
@solara.component
def Page():
data = solara.use_reactive(None)
def hander(arg):
data.value = arg
with solara.Card("Custom vue template with event"):
Custom(label="click on me to trigger an event", event_on_click=hander)
solara.Markdown(f"""# Recieved data from event:
```
arg={json.dumps(data.value, indent=2)}
```
""")
custom.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
<div>
{{ label }}
<v-btn @click="trigger1()">Trigger1</v-btn>
<v-btn @click="trigger2()">Trigger2</v-btn>
<v-btn @click="trigger3()">Trigger3</v-btn>
</div>
</template>
<script>
module.exports = {
created() {
},
methods: {
trigger1() {
this.on_click(1)
},
trigger2() {
this.on_click({key: 'value'})
},
trigger3() {
this.on_click() // no args will call with {}, very annoying :/
},
},
}
</script>