您可以更改 vue.js 中的项目 ID 吗?
Can you change an item's ID in vue.js?
我有一个项目列表,包含在一个 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,我已经在我的示例中这样做了。请随时澄清它如何帮助我解决问题。
按行为 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 解决此问题的方法。
在撰写本文时,vuejs 不支持此功能。
我已经为它提出了 feature request,希望这会导致它的添加。
目前,使用代理 ID(如@HarshalPatil 所建议的)似乎是个好主意,但对于这个特定项目我将跳过。
编辑:我被明确告知要离开,所以可以肯定地说他们不会考虑这个有用的功能。似乎唯一的方法是通过上述代理方法。
我有一个项目列表,包含在一个 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,我已经在我的示例中这样做了。请随时澄清它如何帮助我解决问题。
按行为 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 解决此问题的方法。
在撰写本文时,vuejs 不支持此功能。
我已经为它提出了 feature request,希望这会导致它的添加。
目前,使用代理 ID(如@HarshalPatil 所建议的)似乎是个好主意,但对于这个特定项目我将跳过。
编辑:我被明确告知要离开,所以可以肯定地说他们不会考虑这个有用的功能。似乎唯一的方法是通过上述代理方法。