在vue+vuetify中对数组进行排序时，复选框值会发生变化

Question

在vue+vuetify中，我有多个复选框链接到v-model的数组。问题是，当我对它循环的数组进行排序时，复选框的值会发生变化，这不是我想要的行为。我希望它的价值被保留下来。以下是的示例

https://codepen.io/sneaky666/pen/BaWPQmP?editors=101

HTML

<div id="app">
<v-app id="inspire">
<v-container class="px-0" fluid>
<v-btn @click="FullRefresh" color="primary">
<v-icon>refresh</v-icon>
</v-btn>
<div v-for="g in todos">
<v-checkbox v-model="selected" :value="g.id" :disabled="true" :label="g.text"></v-checkbox>
</div>
</v-container>
</v-app>
</div>

JS-

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
checkbox: true,
selected:[1,3],
todos: [
{ id:1, text: "Learn JavaScript", val: 6 },
{ id:2, text: "Learn Vue", val: 4 },
{ id:3, text: "Play around in JSFiddle", val: 2 },
{ id:4, text: "Build something awesome", val: 1 }
]
}
},
methods:{
FullRefresh:function() {
this.todos = this.todos.sort(function(a,b) {
return a.val - b.val;
});
}
}
})

在演示中，只需单击刷新按钮，它就会对阵列进行排序。看看所有复选框是如何以某种方式被选中的。。。。

有人知道怎么了吗？

感谢

Answer 1

使用v-for时，应始终使用key

<div v-for="g in todos" :key="g.id">

文档

当Vue更新用v-for渲染的元素列表时，默认情况下它使用"就地补丁"策略。如果数据项的顺序发生了变化，Vue不会移动DOM元素以匹配项的顺序，而是将每个元素修补到位，并确保它反映出应该在该特定索引处呈现的内容。

此默认模式非常有效，但仅适用于列表呈现输出不依赖于子组件状态或临时DOM状态(例如表单输入值(的情况