lweein
V2EX  ›  问与答

VUE 循环, item 数据位置改变出现的渲染错误

  •  
  •   lweein · Jan 4, 2019 · 2848 views
  •   You need to sign in to view this topic
    This topic created in 2831 days ago, the information mentioned may be changed or developed.

    循环的内容 dom 包含一个 img,其绑定事件 error,当 item 的判断 img 的 error 为 ture(图片成功显示)时,显示 img 图片,当 error 为 false(图片显示失败)时,显示提示文字。

    问题:当 item 进行排序时,item 的 img 显示状态不进行切换

    例:itemA 为 img 显示成功,itemB 为 img 显示失败,当拖拽排序两个 item,将它们位置对调后,itemA 的 img 显示失败,itemB 的 img 显示成功

    探究:当拖拽操作实际改变了渲染 item 的数据再数组中位置的改变,但 vue 的已渲染出来 item 中 img 没有重新渲染导致 error 事件没有重新触发?亦或已经重新渲染但 error 没有二次触发?

    8 replies  •  2019-05-19 00:23:13 +08:00
    lweein
        1
    lweein  
    OP
       Jan 4, 2019
    求各位大神解答
    horizon
        2
    horizon  
       Jan 4, 2019
    发 codepen 吧。。
    loy6491
        3
    loy6491  
       Jan 4, 2019 via iPhone
    :key 是怎么写的
    Exia
        4
    Exia  
       Jan 4, 2019
    vue 数组改变,要不全部改变,单独改要 this.$set(this.arr[0], 'xxx', data.xxx);
    我的理解不知道是否有误?
    shintendo
        5
    shintendo  
       Jan 4, 2019
    @Exia
    应该不是这个问题,是 v-for 的 key 设置不当的问题
    Exia
        6
    Exia  
       Jan 4, 2019
    @shintendo 噢,谢谢指正 :)
    x66
        7
    x66  
       Jan 4, 2019
    Jiki
        8
    Jiki  
       May 19, 2019
    key 如果设置为 index 的话,会导致这个问题,可以将 key 改为与内容相关的唯一标识。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   738 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 21:25 · PVG 05:25 · LAX 14:25 · JFK 17:25
    ♥ Do have faith in what you're doing.