Py.Cafe

iisakkirotko/

solara-text-number-app

Solara Text and Number Interaction

DocsPricing
  • app.py
  • requirements.txt
  • vue_tmp.vue
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
24
25
import solara

@solara.component_vue('./vue_tmp.vue')
def MyComponent(value: str = '', label: str = 'Enter text', event_sync_value: callable = None, debug: bool = False):
    ...

@solara.component
def Page():
    value = solara.use_reactive('')

    def handle_value_change(new_value):
        print(f"Value changed to: {new_value}")
        value.set(new_value)

    with solara.Column():
        with solara.Card(style={'max-width': '800px'}):
            with solara.Column():
                MyComponent(
                    value=value.value,
                    label="Enter some text",
                    event_sync_value=handle_value_change,
                    debug=True,
                )
                solara.Markdown(f'The value is: {value.value}')
vue_tmp.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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
  <div>
    <v-text-field
      v-model="localValue"
      @input="updateValue"
      :label="label"
    ></v-text-field>
    <v-btn @click="handleButtonClick" color="primary">
      Set Value
    </v-btn>
  </div>
</template>

<script>
module.exports = {
    data() {
        return {
            localValue: this.value
        }
    },
    methods: {
        updateValue() {
            if(this.debug) {
                console.log('updateValue:', this.localValue)
            }
        },
        handleButtonClick() {
            if(this.debug) {
                console.log('handleButtonClick, value:', this.localValue)
            }
            if(this.localValue) {
                this.sync_value(this.localValue)
            }
        }
    },
    watch: {
        value(newValue) {
            this.localValue = newValue
        }
    }
}
</script>