您可以更改 vue.js 中的项目 ID 吗？

Question

我有一个项目列表，包含在一个 javascript 数组中。类似于 the vue.js documentation.

上的示例

这是我正在努力解决的工作流程：

用户点击 "Add"。
我立即将一个项目添加到列表中（在他们要求的位置）
我向服务器发送 ajax 请求以创建项目。
对新项目的数据库行的调用 returns。

我正在使用数据库主键作为我的 vue 键——在 ajax 调用最终返回给我之前我无法知道这一点。但是，如果我只是更新对象上的 ID，我最终会将该行转换出来然后再返回。

有没有办法告诉 vue 我正在更改项目的 ID？

我的理想情况是：

click: function () {
    let item = {
        id: "placeholder id, possibly randomly generated"
    }
    this.array.splice(index, 0, item);
    ajax_call().complete(function (new_id) {
        // item = data.new_id
        vue.update_id_for_object(item, data.new_id)
    })
}

注释掉的行是导致意外转换的行。

有人投票决定将此作为 this question 的副本关闭 - 据我所知，它正在讨论如何动态设置 ID，我已经在我的示例中这样做了。请随时澄清它如何帮助我解决问题。

Answer 1

按行为 key 应该确定列表中项目的唯一性。因此 key 属性中的更改将始终表示不同的组件。

考虑到这一限制，您有两个选择。第一个是最简单的折衷方案 - 只需禁用 animations/transitions.

第二个选项是为每个现有项目和新项目创建 唯一 ID 的本地化地图。例如，

created() {

    this.counter = 0;
    this.mappedKeys = {};

},

// Consider using this method as part of watcher
// Or API call success method.
modifiedList(list) {

    const newList = list.map((x) => {

        if (!this.mappedKeys[x.id]) {
            this.mappedKeys[x.id] = this.counter++;
        }

        return { ...x, id: this.mappedKeys[x.id] };
    });

    // Render this newList
    return newList;
}

对于新添加的项目，将条目添加为：

const nextValue = this.counter++;
this.mappedKeys[nextValue] = newValue;

当ajax调用成功时，添加另一个条目为：

// draftId is the id created in earlier step.
this.mappedKeys[newItem.id] = draftId;

这是将 草稿 ID 映射到从 database/API 返回的 真实 ID 的唯一方法。没有 Vue.js 解决此问题的方法。

Answer 2

在撰写本文时，vuejs 不支持此功能。

我已经为它提出了 feature request，希望这会导致它的添加。

目前，使用代理 ID（如@HarshalPatil 所建议的）似乎是个好主意，但对于这个特定项目我将跳过。

编辑：我被明确告知要离开，所以可以肯定地说他们不会考虑这个有用的功能。似乎唯一的方法是通过上述代理方法。

您可以更改 vue.js 中的项目 ID 吗？

Can you change an item's ID in vue.js?

javascript

transition

vue.js

vuejs-transition-group