vue.js - 排序 v-data-table 检查复选框

Question

有谁能确定为什么排序此表会自动选中某些框？当框的值不在“选中”数组中时，如何选中这些框？

<div id="app">
    <v-app id="inspire">
        <div>
            <v-data-table
                show-select
                :headers="headers"
                :items="desserts"
                class="elevation-1"
            >
                <template v-slot:items="props">
                    <td><v-checkbox v-model="checked" :value="props.item.name" /></td></td>
                    <td>{{ props.item.name }}</td>
                    <td class="text-xs-right">{{ props.item.calories }}</td>
                </template>
            </v-data-table>
        </div>
    </v-app>
</div>

代码笔:https://codepen.io/EoghanCurtin/pen/ExPYqpY

Answer 1

怪异与一些重叠的无效值有关:

• 您使用的是相同的 v-model对于所有复选框
• 你正在使用 string而不是 boolean作为v-model对于复选框。它实际上是一个字符串数组，在你第一次排序之前它变成了字符串(因为 :value 上的 <v-checkbox> 属性，指向一个字符串)。
  用 <pre>{{checked}}</pre> 测试在你的代码笔中。
• 您正在关闭第一个 <td>两次(无效的 html)。

可能的修复:

<template v-slot:items="{ item }">
  <td><v-checkbox v-model="cb[item.name]" /></td>
  <td v-text="item.name" />
  <td class="text-xs-right" v-text="item.calories" />
</template>

...

data: () => ({
  cb: {},
  ...
}),
computed: {
  checked() {
    return Object.entries(this.cb)
      .filter(o => o[1]).map(o => o[0])
    }
},
...

看到它工作 here .