V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
freezebreze
V2EX  ›  前端开发

关于 vue 的 v-for key 的问题

  •  
  •   freezebreze · 48 天前 · 800 次点击
    这是一个创建于 48 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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 条附言  ·  48 天前

    示例代码 大致逻辑是这样

    第 2 条附言  ·  48 天前
    示例代码的数据变动视图是变动的,可能是数据太简单了?实际上每个 item 交换后,差异在于 item 里的某个对象里的数组变化了,不是层次太深,对比不出来差异
    5 条回复
    vace
        1
    vace  
       48 天前
    不会,没 key 不写就行了,只影响 diff 效率。可以 去 https://play.vuejs.org 贴最小可执行代码。
    zblongfei
        2
    zblongfei  
       48 天前
    可以自己生成一个唯一 id
    v21984
        3
    v21984  
       48 天前
    就是是 key 的问题,根据数组提前生成唯一 id 用作 key
    sixi712
        4
    sixi712  
       48 天前 via Android
    确实是 key 的问题,没有合适的值做 key 的话你就 json.stringify 一下 item ,你就会得到一个巨大的 key🤣
    gzyguy
        5
    gzyguy  
       48 天前
    map 一下数组,把下标放到 item 里面当 key ?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5380 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 09:16 · PVG 17:16 · LAX 01:16 · JFK 04:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.