我试图使用 vuetify 在可数据可访问中制作一个复选框单元格，但它不起作用

Question

我想在datatable中打勾，当用户(datatable包含用户(是管理员时勾选复选框。

我尝试了这段代码，但它不起作用。{{value==1}}有效，因此值为真/假。但复选框不会更改。

我能做什么？

<template v-slot:item.admin="{value}">
<v-checkbox>
readonly
:value="value==1"
></v-checkbox>
{{value==1}}
</template>

Answer 1

使用v-model设置复选框状态。

我认为您可能在为template设置v-slot时遇到问题。通常，item被传递给v-slot值，然后在引用时获取键的值，使用item[key]，例如item.admin，假设admin将是0、1、true、false、null或undefined。

对所提供代码的重构将是：

<template v-slot:item.admin="{item}">
<v-checkbox>
v-model="item.admin"
:ripple="false"
readonly
></v-checkbox>
</template>
<!-- :ripple="false" is to remove the animation on click -->

工作示例：

Vue.config.productionTip = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Name',
width: '9rem',
value: 'name',
},
{ 
text: 'Is Admin',
value: 'admin'
}
],
users: [
{
name: 'Person A',
admin: 1
},
{
name: 'Person B',
admin: 0
}
],
}
}
})

.v-data-table {
width: 16rem;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.1.14/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="users"
class="elevation-1"
hide-default-footer
>
<template v-slot:item.admin="{ item }">
<v-checkbox v-model="item.admin" readonly :ripple="false"></v-checkbox>
</template>
</v-data-table>
</v-app>
</div>