widgetti / widgetti/ipyvuetify
v-select does not work as expected when used as Child Component with VuetifyTemplate
Open
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 355
- Forks
- 61
- PR merge metrics
- No merged PRs in 30d
Description
I am not sure the problem is related only to v-select but it might be more general.
Below an example:
- I define a very simple
Selectcomponent (WORKS)
import ipywidgets as widgets
import ipyvue as vue
from traitlets import Dict, Unicode, List
import ipyvuetify as v
select_template= '''
<template>
<v-row align="center">
<v-col cols="4">
<v-select :items="items" label="Test"></v-select>
</v-col>
</v-row>
</template>
<script>
module.exports = {
props: ["items"]
}
</script>
'''
class Select(v.VuetifyTemplate):
items = List([]).tag(sync=True)
template = Unicode(select_template).tag(sync=True)
Select(items=['a', 'b', 'c'])

- I put this component in a
Maincomponent using theSelectclass directly (DOESN'T WORK as expected)
Clicking on the arrow to show the menu items is not working.
class Main(v.VuetifyTemplate):
items = List([]).tag(sync=True)
template = Unicode('''
<template>
<v-card>
<v-card-title>Showing SubComponents</v-card-title>
<my-select :items="items"/>
</v-card>
</template>
''').tag(sync=True)
components=Dict({
'my-select': Select,
}).tag(sync=True, **v.VuetifyTemplate.class_component_serialization)
Main(items=['a', 'b', 'c'])

- I do the same thing but I specify the component as a string using
templateinstead of using theSelectclass (WORKS)
class Main(v.VuetifyTemplate):
items = List([]).tag(sync=True)
template = Unicode('''
<template>
<v-card>
<v-card-title>Showing SubComponents</v-card-title>
<my-select :items="items"/>
</v-card>
</template>
''').tag(sync=True)
components=Dict({
'my-select': select_template,
}).tag(sync=True, **v.VuetifyTemplate.class_component_serialization)
Main(items=['a', 'b', 'c'])

- Finally if I use the class as a component instead of the template string I am also experiencing the same problem of this issue on
ipyvueabout the events emitted by theChildnot been sent to theParent
Any help on this would be appreciated.
Many thanks
Gio
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the Select and Main examples from the issue, comparing the class component with the template-string component. Investigate the Select component registration and the child-to-parent event behavior described alongside ipyvue issue 28. Done means the nested v-select opens its menu and child events reach the parent as expected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- python
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100