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建议）似乎是个好主意，但我将跳过该特定项目。

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

您可以在vue.js中更改商品的ID吗？

2 个答案: