4

我有一个项目列表,包含在一个 javascript 数组中。类似于vue.js 文档中的示例。

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

  • 用户点击“添加”。
  • 我立即将一个项目添加到列表中(在他们要求的位置)
  • 我向服务器发送 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)
    })
}

注释掉的行是导致不希望的转换的行。

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

4

2 回答 2

2

通过行为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 解决这个问题的方法。

于 2019-03-22T04:30:50.207 回答
0

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

我已经为它提出了一个功能请求,希望这会导致它的添加。

目前,使用代理 ID(如 @HarshalPatil 所建议的)似乎是一个好主意,但我将跳过这个特定项目。


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

于 2019-03-26T23:48:56.160 回答