CODEWITHSUNDEEP
javascripttypescriptvue.jsvuejs2element-ui
Anonymous Creator
Anonymous Creator

Reputation: 3819

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;

}

Upvotes: 0

Views: 1082

Answers (2)

Dan
Dan

Reputation: 63089

Scoped Slots and Slot Props

el-tree is a slotted component and, by default, slots only have access to the same instance properties as the rest of the containing template. So for example, the slot does not have access to :data.

If you must access this data in the parent template, you need to use slot props and also explicitly bind the data in the slot's template. So in the el-tree component template, you bind the data to the slot like this:

<slot :data="data"></slot>

Then in the parent template, you can access data via the v-slot directive like this:

<template v-slot:default="slotProps">
    {{ slotProps.data }}
</template>

The default argument refers to the slot name, which is named "default" if none is specified.

Here is a fiddle showing this behavior.

*You can read more about slots & slot props here.

Upvotes: 1

Anonymous Creator
Anonymous Creator

Reputation: 3819

Binding blur event as following worked for me.

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

instead of following.

@blur="saveOrDiscard(node, data)"

Upvotes: 0

Related Questions