[英]Can you change an item's ID in vue.js?
我有一个项目列表,包含在一个 javascript 数组中。 类似于vue.js 文档中的示例。
这是我正在努力解决的工作流程:
我正在使用数据库主键作为我的 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,这在我的示例中已经在做。 不过,请随时澄清它如何帮助我解决问题。
通过行为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 解决这个问题的方法。
在撰写本文时,vuejs 不支持此功能。
我已经为它提出了一个功能请求,希望这会导致它的添加。
目前,使用代理 ID(如 @HarshalPatil 所建议的)似乎是一个好主意,但我将跳过这个特定项目。
编辑:我被明确告知要离开,所以可以肯定地说他们不会考虑这个有用的功能。 似乎唯一的方法是通过上述代理方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.