Search code examples
javascripttypescriptvue.jsvuejs2element-ui

Tree Node Id not updating. Element UI Vue

<el-tree :data="Project">
       <span class="custom-tree-node" slot-scope="{ node, data }" v-contextmenu:contextmenu>
            <el-input
              placeholder="Please input"
              v-model.trim="data.label"
              @blur="saveOrDiscard(node, data)"
            ></el-input>
          </span>
      </el-tree>

I have used method as below, where I am updating id of treenode (which is from ajax call inserted id. I have simply changed to clearly explain problem).

But data of tree (which I have given as Project) is not updating. Next time it shows 0 value (which I have set as deault). 

public saveOrDiscard(node: TreeNode<any, TreeData>, data: TreeData) {

    //Following 456 is not updating in tree data.
    node.data.id = 456;

}
Solution

  • Binding blur event as following worked for me.

    @blur="() => saveOrDiscard(node, data)"

    instead of following.

    @blur="saveOrDiscard(node, data)"