Vue表格grid数据排序后顺序变更时Databind未触发重新绑定问题

问题根源 #

你遇到的排序后UI不更新的问题，核心是v-for绑定的key使用了数组索引index导致的。
Vue的虚拟DOM diff机制依赖key识别节点是否需要复用/重排：当你用索引作为key时，列表排序后对应位置的索引不会变化，Vue会默认复用该位置的原有组件节点，仅更新传入的protocol属性值，不会触发整个列表的重排，最终表现为UI顺序不变。
这种使用索引作为key的做法也会抵消你抽离子组件带来的性能收益，diff阶段的判断成本会更高。

解决方案 #

不需要调用额外的强制刷新方法，也不需要销毁重建列表，只需要修改两处代码即可：

• 将v-for的key替换为列表项的唯一标识，你这里直接用protocol.ProtocolID即可，保证每个列表项的key全局唯一，排序时会跟着项的位置变化，Vue可以正确识别节点重排需求。
• 修复HTML结构错误：tbody的直接子元素只能是tr，你当前用div包裹子组件属于不规范写法，可能引发额外的渲染异常，直接把外层的div替换为tr即可。

修改后的tbody代码如下：

<tbody>
    <tr v-for="protocol in filterList" v-bind:key="protocol.ProtocolID" class="data-row">
        <MonitoringStatusListItem  class="data-row" v-if="hasAccess(protocol.ProtocolID,'Monitoring Status')" :protocol="protocol" />
    </tr>
</tbody>

如果你的MonitoringStatusListItem组件内部对传入的protocol做了本地缓存赋值，确保你监听了protocol的变化同步更新本地状态，否则也可能出现组件内容不更新的问题。

内容的提问来源于stack exchange，提问作者davion williams