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

[lweein]

循环的内容 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 没有二次触发？

[lweein]

求各位大神解答

[horizon]

发 codepen 吧。。

[loy6491]

:key 是怎么写的

[Exia]

vue 数组改变，要不全部改变，单独改要 this.$set(this.arr[0], 'xxx', data.xxx);
我的理解不知道是否有误？

[shintendo]

@Exia
应该不是这个问题，是 v-for 的 key 设置不当的问题

[Exia]

@shintendo 噢，谢谢指正 ：）

[x66]

https://cn.vuejs.org/v2/guide/list.html#key

[Jiki]

key 如果设置为 index 的话，会导致这个问题，可以将 key 改为与内容相关的唯一标识。