Vue2中Vuetify v-data-table单选框不显示问题求助

你的v-data-table单选框不显示的核心问题是单选模式下v-model绑定的变量类型错误，同时可配合优化部分配置：

1. 修正v-model绑定的变量类型 #

在Vuetify 2的single-select模式下，v-model应绑定单个值（代表选中的单行数据），而非数组。你当前将selected初始化为数组[]，会导致单选逻辑异常，进而使单选框无法正常渲染。

将selected的初始值改为null或undefined：

data() {
  return {
    singleSelection: true,
    selected: null, // 从数组改为单个值类型
    // ... 其他代码不变
  }
}

2. 优化item-key配置（可选，更规范） #

虽然你用title作为唯一标识可行，但item-key更推荐使用唯一标识性更强的字段（如id）。如果没有id字段，当前的title可继续使用，但需确保所有项的title值唯一。

修改后的完整代码 #

<template>
    <v-data-table 
      v-model="selected"
      hide-default-footer
      :headers="headers" 
      :items="tutorials"
      :single-select="singleSelection"
      item-key="title"    
      show-select
    > 
    </v-data-table>
</template>

<script>
export default {
  name: "tutorials-list",
  data() {
    return {
      singleSelection: true,
      selected: null, // 修正为单个值类型
      headers: [
        {
          text: "Title",
          align: "end",
          value: 'title',
          key: "title",
        },
        {
          text: "Description",
          align: "start",
          value: "description",
          key: "description",
        },
        {
          text: "Status",
          align: "end",
          value: 'published',
          key: "published",
        },
      ],
      tutorials: [{
          title: "Tutorial #1",
          description: "description 1",
          published: false
        },
        {
          title: "Tutorial #2",
          description: "description 2",
          published: true
        },
      ],
    };
  },
};
</script>

额外检查项 #

• 确认项目已正确引入Vuetify 2的样式文件，样式缺失会导致单选框仅显示空白区域。
• 验证项目使用的Vuetify版本为2.x，避免版本不兼容引发的功能异常。

内容的提问来源于stack exchange，提问作者user21401037