VUE: Tree View doesn’t update prop


I’ve got a problem with my tree view. Basically it doesn’t update its DOM when a node is removed or moved from its position.
Structure: There’s a main component where all the changes are made(editing, removing) and a child component(I’m using the Vue tree-view example) that receives an Object as PROP.
Here the things I’ve seen:

  1. It DOES update if I change its text;
  2. It DOESN’T update instantly if I remove a node or if I move a node from its position.
  3. It updates only If I make another action(like toggling).

Here a list of the things I’ve tried:

  1. I added a watcher in child and I can see that it updates in the console;
  2. I added a :key to the component passing the id;
  3. I used a forceUpdate to the edit function;
  4. I used the .sync to see if it updated but nada

It seems like it gets the changes but the event doesn’t work immediately in the UI.
Can somebody help me?
Here some of my code

<div class="tree" v-for="item in todosTree">
  <tree-item
       class="item"
                  :item="item"
                  :key="item.id"
                  @make-folder="makeFolder"
                  @add-item="addItem"
                  @edit-todo="editTodo"
                  @start-todo="startTodo"
                  @stop-todo="completeTodo"
                  @remove-todo="removeTodo"
  ></tree-item>   
</div>
    todosTree:function()
    { return creatingTree(this.todos)  
    }
<li>
            <div
              :class="{bold: isFolder}"
              class="treeItem"
              @dblclick="makeFolder"
              >
              <div
              @click="toggle">
             //...code..
              {{ item.title }}  
              </div>
              <slot><div>
              <button ..code.. @click="$emit('edit-todo',item)".code..</button>
              <button .code.. @click="$emit('start-todo',item)">.code..</button>
              <button .code.. @click="$emit('stop-todo', item)">.code..</button>
              <button .code.. @click="$emit('remove-todo',item)">.code..</button>
              </div></slot>
            </div>
            <ul v-show="isOpen" v-if="isFolder">
              <tree-item
                class="item"
                v-for="(item, index) in item.children"
                :key="item.id"
                :item="item"
                @make-folder="$emit('make-folder', $event)"
                @add-item="$emit('add-item', $event)"
                @edit-todo="$emit('edit-todo',$event)"
                @start-todo="$emit('start-todo',$event)"
                @stop-todo="$emit('stop-todo', $event)"
                @remove-todo="$emit('remove-todo',$event)"
                ></tree-item>
        
               ..code..
            </ul>
</li> 

What’s going on? Thanks to the people who will try to help me

Source: Vue – Stack Overflow

November 24, 2021
Category : News
Tags: javascript | prop | treeview | vue-reactivity | Vue.js

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.