关于 vue 的 v-for key 的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 370 天前的主题，其中的信息可能已经有所发展或是发生改变。

interface item  {
    config1 : any
    config2 : any
    config3 : any
    config4 : any
    config5 : any
    config6 : any
    config7 : any
}
const obj = reactive<item[]>([])

有这样的一个对象，我 v-for 用数组下标做 key 值，有一个拖拽操作，会交换这两项在数组中的位置，但是视图并没有刷新，数据是更新了的，是 key 的问题吗，是的话，怎么解决？ item 里没有值适合做 key

第 1 条附言 · 2024-10-17 09:46:21 +08:00

示例代码大致逻辑是这样

第 2 条附言 · 2024-10-17 10:46:56 +08:00

示例代码的数据变动视图是变动的，可能是数据太简单了？实际上每个 item 交换后，差异在于 item 里的某个对象里的数组变化了,不是层次太深，对比不出来差异

v-for

key

拖拽

5 条回复

vace

2024-10-17 00:25:57 +08:00

不会，没 key 不写就行了，只影响 diff 效率。可以去 https://play.vuejs.org 贴最小可执行代码。

zblongfei

2024-10-17 08:26:48 +08:00

可以自己生成一个唯一 id

v21984

2024-10-17 08:50:38 +08:00

就是是 key 的问题，根据数组提前生成唯一 id 用作 key

hoooo

2024-10-17 09:08:48 +08:00 via Android

确实是 key 的问题，没有合适的值做 key 的话你就 json.stringify 一下 item ，你就会得到一个巨大的 key🤣

callv

2024-10-17 10:31:21 +08:00

map 一下数组，把下标放到 item 里面当 key ？