Javascript 在vue+；中对数组排序时，复选框值会更改；武装分子

在vue+vuetify中，我有多个复选框链接到v-model的数组。问题是当我对它循环的数组进行排序时，复选框的值会改变，这不是我想要的行为。我想保留它的价值。这里有一个例子

HTML

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

有人知道怎么了吗

---

谢谢

当使用

v-for

时，您应该始终使用

键

当Vue更新使用

v-for

呈现的元素列表时，默认情况下，它使用“就地补丁”策略。如果数据项的顺序已更改，Vue不会移动DOM元素以匹配项的顺序，而是将每个元素修补到位，并确保它反映了在该特定索引处应呈现的内容

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

---

使用

v-for

时，应始终使用

键

当Vue更新使用

v-for

呈现的元素列表时，默认情况下，它使用“就地补丁”策略。如果数据项的顺序已更改，Vue不会移动DOM元素以匹配项的顺序，而是将每个元素修补到位，并确保它反映了在该特定索引处应呈现的内容

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

---

在旁注上；您不必将排序后的数组分配给“TODO”。数组已按位置排序。排序后，您可以通过控制台记录“选定”数组来轻松调试；您不必将排序后的数组分配给“TODO”。数组已按位置排序。排序后，通过控制台记录“选定”数组，可以轻松地进行调试。

<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>

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;
      });
    }
  }
})