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