Идентификатор узла дерева не обновляется.Элемент UI Vue

Question

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

Я использовал метод, описанный ниже, где я обновляю id для treenode (это из идентификатора вставки вызова ajax. Я просто изменил, чтобы ясно объяснить проблему).

Но данные дерева (которые я дал как Project) не обновляются. В следующий раз он показывает значение 0 (которое я установил как deault).

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

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

}

Answer 1

Слоты и реквизиты слотов

el-tree - это слот-компонент, и по умолчанию слоты имеют доступ только к тем же свойствам экземпляра, что и остальная часть содержащегося шаблона.Так, например, слот не имеет доступа к :data.

Если вам нужен доступ к этим данным в родительском шаблоне, вам нужно использовать реквизиты слота , а также явно привязывать данныев шаблоне слота.Таким образом, в шаблоне компонента el-tree данные привязываются к слоту следующим образом:

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

Затем в родительском шаблоне вы можете получить доступ к данным через директиву v-slot, например:

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

Аргумент default относится к имени слота, которое называется "default", если ничего не указано.

Вот скрипка , показывающая это поведение.

* Подробнее о слотах и ​​их слоте можно узнать здесь здесь .

Answer 2

Событие размытия привязки, как у меня сработало.

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

вместо следующего.

@blur="saveOrDiscard(node, data)"