Vue+Vuetify中数组排序后Checkbox选中状态异常问题

• 首要原因是 v-for 未绑定唯一key属性。Vue的列表渲染默认采用「就地复用」策略，未指定key时，数组排序后Vue不会移动DOM节点，只会就地更新每个位置节点的内容，导致v-checkbox的value属性与选中状态的对应关系错乱，无法正确匹配selected数组中的值，触发非预期的选中变更。
• 次要原因是Array.sort()为原地排序方法，会直接修改原数组，直接将排序结果赋值给todos会触发额外的响应式更新，进一步加剧渲染错乱。

1. 给v-for添加唯一key #

修改列表渲染部分的代码，用item的唯一id作为key：

<div v-for="g in todos" :key="g.id">
    <v-checkbox v-model="selected" :value="g.id" :disabled="true" :label="g.text"></v-checkbox>
</div>

2. 排序前拷贝数组避免原地修改 #

修改排序逻辑，先浅拷贝原数组再执行排序，不直接修改原数组：

FullRefresh:function() {
  this.todos = [...this.todos].sort(function(a,b) {
    return a.val - b.val;
  });
}

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