I'm wondering if there is an easy way to accomplish this using Vue. Essentially I want to display a dynamic navigational hierarchy using radio elements.
So essentially if I had the top level with Color, Shape, Standalone and select Color it would show a new radio group from an array of child objects ("Blue", "Yelllow, etc.) but if a selection does not have a child array it doesn't expand.
The easiest way to describe this is as a sort of hierarchical folder structure which typically uses something like a tree view but I've yet to find anything using radio input.
Related
I'm writing an app in Vue and I have a really hard time understanding the component hierarchy, namely the parent-child relationships and how to pass data around.
I have a view that contains a map which in turn has some navigation controls and options that are overlayed on top of the map. Now, I want these controls to manipulate the map WITHOUT having to nest the buttons inside the actual maps as it will cause severe display issues (for example, clicking on a zoom button falls through the button and also clicks the next element under it).
My app looks like this:
Mapview
Map
Controls
Options
Optionpanel1
Optionpanel2
...
Now, a HTML input element in Optionpanel1 needs to control something in the Map, which is not actually it's parent component. Also, some data from Map needs to be passed down to Optionpanel1 so it would know what to control. To make matters worse, something in Options also needs to pass something down to Optionpanel1, so, even though event bus would allow communication upwards, it would not solve that I need to pass data from parents to indirect children and also components that are not it's children.
I can actually pass the required property down the line if I nest the Options inside Map and pass it down with :myProp="prop" and then in Options, declare it in props and bind to Optionpanel1, where it is again declared as a prop. But as I mentioned earlier, nesting elements that I do not want to be nested in a visual sense causes massive issues like mouse click falling through. Do elements even need to be nested inside eachother in order to define parent-child relationship?
I would want components to exchange read-only data without Y being a child of X in the DOM. Also, even if nesting components like this would not cause visual issues, does it not seem very annoying to have to register and bind it in every component along the way?
I don't understand why is it so difficult to simply read something from another component. It's starting to seem that Vue is causing a problem that it's supposed to solve? Am I missing something here or am I looking at this in a completely wrong way?
Thanks in advance.
Basically you have 2 options to control complex components:
Handle the actions in your so-called "smart component" (in terms of React), which is the common ancestor for the controlling and controlled components. It's a pretty good solution for small components, but that's not the case.
To separate common logic and data in a Vuex store. I'd recommend you doing this.
I trying to create tree view component (something like this https://www.jstree.com/), where I can turn on edit mode and select which one should be visible. I tried different ways, but none of them worked properly. I would like to have access to selected tree and entire tree from outer component, so it probably should be reactive.
It's not reactive, because of nested arrays (children).
How to reproduce:
Click Edit in left tree
Click Expand all on both tree
Click some
nested checkboxes
Right tree view should changed, but it doesn't.
Live demo: https://jsfiddle.net/rs3hoktb/
*Yeah I know, I should avoid mutating props cause of One-Way Data Flow.
I have 2 lists of items (same type) and I want to be able to drag and drop items between the containers. For example moving an orange component into the list of yellow components like this image:
Each of the list items has a prop that indicates it's parent so I feel like I have the necessary info to make this work, like on a move event check if the moving items parent matches the container it's currently moving in. I don't know if it's possible with react-dnd. Has anyone done this? If so, can you provide an example?
I´d like to create a tree mixing radio and checkbox .... The first section will use radio (to select just one Base layer in my map) and the others sections will use checkbox (to select any layers to show up)
Is it posible to do that with dynatree? Image attached...
Checkboxes and Radioboxes are simply CSS styled <span> tags, so you can add your own CSS that overrides this based on some custom node classes.
You should then use selectMode: 2, and implement the desired behavior in the onSelect handler.
I have a simple tree grid and i need to programmatically expand a row to show its children. In essence i need to fake the click event that triggers the opening of the tree.
see and example here http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_treegrid_model_lazy.html
I haven't personally used the TreeGrid, but from the API docs, it looks like you want to use the expandoFetch(rowIndex,open) function with the open parameter as true:
myTreeGrid.expandoFetch(0,true);