关于 vue 的 v-for key 的问题

V2EX = way to explore

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

现在注册

已注册用户请登录

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 条附言 · 1 天前

示例代码大致逻辑是这样

第 2 条附言 · 1 天前

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

5 条回复

vace

1 天前

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

zblongfei

1 天前

可以自己生成一个唯一 id

v21984

1 天前

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

sixi712

1 天前 via Android

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

gzyguy

1 天前

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