liquor-tree
liquor-tree copied to clipboard
amsik
Vuex not working with editmode, keyboardNavigation, deletion options
Seems there is a bug with "node.startEditing" and keyboardNavigation and deletion options when tied to vuex. Everything works without vuex but when tied to treedata from store the edit does't work. Or have i configured incorrectly?
treeFilter: '',
treeOptions: {
store: {
store:this.$store,
getter: () => {
return this.$store.getters.tree
},
dispatcher: (tree) => {
this.$store.dispatch('updateTree', tree)
}
},
filter: {
emptyText: 'No results found'
},
keyboardNavigation:true,
deletion:true,
dnd: true
},
This is the tree component
<tree
:filter="treeFilter"
:options="treeOptions"
@node:dragging:start="logDragStart"
@node:dragging:finish="logDragFinish"
>
<div slot-scope="{ node }" class="node-container">
<div class="node-text">{{ node.text }}</div>
<div class="node-controls">
<a href="#" @mouseup.stop="editNode(node)">Edit</a>
</div>
</div>
</tree>
This is the edit function in the methods
editNode(node, e) {
node.startEditing()
},
@amsik do you have time to investigate the issue with edit mode with vuex?
@amsik any chance you have an update on this? The editmode is most important.
Hi people. Have same issue though magically deletion works! No editmode - fails without any error, no keyboard navigation. propertyNames option is also seems to be ignored when using vuex...
Yeah, I have the similar behavior. Here's fiddle for convinience
Basing on my expirience and on this fiddle - html is being rebuilt on every action. That means that on startEditing - input IS rendered but on the next moment the whole tree is rebuilt flushing any changes.
This is very clear if you take quoted fiddle and set breakpoint on div.tree-scope (with chrome devtools) to pause on node removal (and on subtree modification just in case) - you'll see rendered input which is going to disappear on resume because of total tree refresh.
This is an amazing component - almost perfect treeview for Vue. Can we build it better together?
Futher investigations show that when usin Vuex TreeMixin.js subscribes component to Store actions and updating whole DOM on every emit of LIQUOR_NOISE event
Store.subscribe((action, state) => { if (!mutations) { this.tree.setModel(getter()) } else if (mutations.includes(action.type)) { this.tree.setModel(getter()) } }) this.tree.setModel(getter())
this.$on('LIQUOR_NOISE', () => {
this.$nextTick(_ => {
dispatcher(this.toJSON())
})
})
So when you click on node - it becomes "selected", event emitted and whole tree dispatched to Store. And on the next moment Store subscriber catching changes in Store and sets model to DOM - refreshing it totally. This leads to multiple mutations at a time. It triggers twice or even three times sometimes. All this makes vuex integration unusable in the moment. I'll try to rethink the concept but I'm sure @amsik will solve this.
Small workaround. Works only in my case - tree is rendered inside slideout panel which can be closed by clicking button. I skipped Store.dispatch('updateTree', tree) in dispatcher property (commented out so far) and made panel closing handler which first dumps tree to vuex store then closes panel
let treeJSON = this.$refs.treeStructure.toJSON() this.$store.dispatch('updateTree', treeJSON)
where treeStructure is ref="treeStructure" on component.
Now user can manipulate tree in opened panel, dnd, navigate with keyboard, edit nodes and save them. And when panel is closed - tree dumped to store. Still weak but works for me so far.
А с этим вопросом так и не решилось? Я заложился уже на vuex, а редактирование(startEditing) с vuex не работает...
This approach seems to work. Instead of having a dispatcher in the options:
dispatcher: (tree) => { this.$store.dispatch('updateTree', tree) }
One can add the dispatch to the editing:stop event:
mounted() { this.$refs.tree.$on('node:editing:stop', (node, isTextChanged) => { this.$store.dispatch('updateTree', this.$refs.tree.toJSON()) }) }
