树节点 ID 未更新。元素 UI Vue答案

【问题标题】：Tree Node Id not updating. Element UI Vue树节点 ID 未更新。元素 UI Vue
【发布时间】：2019-10-29 19:25:06
【问题描述】：

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

我使用了如下方法，我正在更新treenode的id（来自ajax调用插入的id。我只是简单地改变了清楚地解释问题）。

但是树的数据（我作为项目给出）没有更新。下次它显示 0 值（我已将其设置为默认值）。

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

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

}

【问题讨论】：

标签： javascript typescript vue.js vuejs2 element-ui

【解决方案1】：

以下绑定模糊事件对我有用。

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

而不是跟随。

@blur="saveOrDiscard(node, data)"

【讨论】：

【解决方案2】：

Scoped Slots 和 Slot Props

el-tree 是一个插槽组件，默认情况下，插槽只能访问与包含模板的其余部分相同的实例属性。例如，该插槽无权访问:data。

如果你必须在父模板中访问这些数据，你需要使用 slot props 并且在 slot 的模板中显式绑定数据。所以在el-tree 组件模板中，你将数据绑定到槽中，如下所示：

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

然后在父模板中，您可以通过v-slot 指令访问数据，如下所示：

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

default 参数指的是插槽名称，如果未指定，则将其命名为“默认”。

Here is a fiddle 显示此行为。

*您可以阅读更多关于插槽和插槽道具的信息here。

【讨论】：