[英]Can you change an item's ID in vue.js?
I have a list of items, contained within a javascript array.我有一个项目列表,包含在一个 javascript 数组中。 Similar to the examples found on the vue.js documentation .类似于vue.js 文档中的示例。
This is the workflow I'm struggling with:这是我正在努力解决的工作流程:
I'm using the database primary key as my vue key - which I have no way of knowing up to the point the ajax call finally gets back to me.我正在使用数据库主键作为我的 vue 键——我无法知道 ajax 调用最终返回给我。 But if I simply update the ID on the object, I end up with that row transitioning out and then back in.但是,如果我只是简单地更新对象上的 ID,我最终会将该行转换出来然后再转换回来。
Is there a way to tell vue that I'm changing the ID of an item?有没有办法告诉 vue 我正在更改项目的 ID?
My ideal case would be something along the lines of:我理想的情况是这样的:
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)
})
}
The commented out line is the one that causes the undesired transition.注释掉的行是导致不希望的转换的行。
Someone voted to close this as a duplicate of this question - as far as I can tell, it's talking about how to set ids dynamically which I'm already doing in my example.有人投票将其作为此问题的副本关闭-据我所知,它正在谈论如何动态设置 ID,这在我的示例中已经在做。 Feel free to clarify how it helps my issue though.不过,请随时澄清它如何帮助我解决问题。
By behavior key
is supposed to determine the uniqueness of the item in a list.通过行为key
应该确定列表中项目的唯一性。 So change in the key
attribute is and will always represent a different component.因此, key
属性的变化将始终代表不同的组件。
Having this limitation in mind, you have two options.考虑到这一限制,您有两种选择。 First is the simplest one with a compromise - just disable the animations/transitions.第一个是最简单的折衷方案 - 只需禁用动画/过渡。
The second option is to create a localized map of unique id for each existing and new item.第二个选项是为每个现有项目和新项目创建唯一 id的本地化地图。 For example,例如,
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;
}
For a newly added item, add the entry as:对于新添加的项目,将条目添加为:
const nextValue = this.counter++;
this.mappedKeys[nextValue] = newValue;
When ajax call succeeds, add another entry as:当 ajax 调用成功时,添加另一个条目:
// draftId is the id created in earlier step.
this.mappedKeys[newItem.id] = draftId;
This is the only thing you can do to map draft id to real id returned from database/API.这是您唯一可以将草稿 ID映射到从数据库/API 返回的真实 ID的方法。 There is not Vue.js way of doing things for this problem.没有 Vue.js 解决这个问题的方法。
This functionality, at time of writing, is not supported by vuejs.在撰写本文时,vuejs 不支持此功能。
I have raised a feature request for it, which hopefully will result in its addition.我已经为它提出了一个功能请求,希望这会导致它的添加。
For now, using proxy ids (as suggested by @HarshalPatil) seems to be a good idea, but one that I'm going to skip for this specific project.目前,使用代理 ID(如 @HarshalPatil 所建议的)似乎是一个好主意,但我将跳过这个特定项目。
EDIT: I've been told in no uncertain terms to go away, so it's pretty safe to say that they aren't going to consider this useful functionality.编辑:我被明确告知要离开,所以可以肯定地说他们不会考虑这个有用的功能。 Seems the only way to do it is via the proxy method described above.似乎唯一的方法是通过上述代理方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.