你能在vue.js中更改项目的ID吗？

Question

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

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

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

我正在使用数据库主键作为我的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属性并且将始终表示不同的组件。

考虑到这一限制，您有两种选择。首先是最简单的妥协 - 只需禁用动画/过渡。

第二个选项是为每个现有项目和新项目创建唯一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映射到从数据库/ API返回的实际ID唯一可以做的事情。对于这个问题，没有Vue.js做事的方式。

Answer 2

在编写时，vuejs不支持此功能。

我为它筹集了一个feature request，希望这会增加它。

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

---

编辑：我已经被告知可以毫不含糊地离开，所以说它们不会考虑这个有用的功能是非常安全的。似乎唯一的方法是通过上面描述的代理方法。