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

Docs

When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index.

this default mode is efficient, but only suitable when your list render output does not rely on child component state or temporary DOM state (e.g. form input values).

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

Checkbox value changes when sorting array in vue + vuetify

javascript

vue.js

vuetify.js