Vuex not working with editmode, keyboardNavigation, deletion options

[thokkane]

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()
    },

[thardraved]

Yeah, I have the similar behavior. Here's fiddle for convinience

[thokkane]

@amsik do you have time to investigate the issue with edit mode with vuex?

[amsik]

I will try to find the time on the weekends

[thokkane]

@amsik any chance you have an update on this? The editmode is most important.

[roquie]

New Year's miracle did not happen :'(

[moroq]

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...

[moroq]

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?

[moroq]

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.

[moroq]

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.

[agorodnichev]

А с этим вопросом так и не решилось? Я заложился уже на vuex, а редактирование(startEditing) с vuex не работает...

[nhaga]

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())       }) }

[louismorgner]

Any updates on this one?