Vue2+Vuetify数据表格结合TypeScript开发props未定义报错求助

兄弟，你这个问题我刚接触Vue2+Vuetify+TypeScript的时候也踩过！这个警告的核心就是：你模板里用到了叫props的变量，但你的组件实例上根本没定义它——不管是作为组件内部的响应式数据，还是接收父组件传递的props，都没声明。结合你用的是Vuetify 0.1.7这个老版本，大概率是抄文档的时候混淆了概念，给你一步步说怎么修：

第一步：先搞明白Vuetify表格的正确配置 #

Vuetify 0.1.7的v-data-table根本没有叫props的属性！你大概率是把示例里的其他配置写错成props了，表格最核心的两个配置是表头headers和数据items，先把模板里的错误属性改过来：

<template>
  <!-- 把错误的:props换成正确的headers和items -->
  <v-data-table
    :headers="tableHeaders"
    :items="tableData"
    item-key="id" <!-- 老版本Vuetify需要指定唯一标识字段 -->
  ></v-data-table>
</template>

第二步：在TypeScript组件里正确定义响应式数据 #

用vue-property-decorator的话，Vue2的class组件里直接写属性就是响应式data，不需要额外写data()函数。你可以把表头和数据直接定义在组件里，或者从外部TS文件导入：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
// 如果数据是从外部TS文件导入的，比如data.ts
// import { tableHeaders, tableData } from './your-data-file.ts';

// 先给表格数据定义个类型，TS更友好
interface TableRow {
  id: number;
  name: string;
  phone: string;
}

@Component
export default class MyDataTable extends Vue {
  // 表格表头（响应式数据）
  tableHeaders = [
    { text: 'ID', value: 'id' },
    { text: '姓名', value: 'name' },
    { text: '手机号', value: 'phone' }
  ];

  // 表格数据（如果是从外部导入的，直接赋值就行）
  tableData: TableRow[] = [
    { id: 1, name: '王小明', phone: '138xxxx1234' },
    { id: 2, name: '李小红', phone: '139xxxx5678' }
  ];
}
</script>

第三步：如果是组件传参需要用props的情况 #

如果你是想让父组件给这个表格组件传数据，那得用@Prop装饰器声明组件接收的props，不能直接在模板里写props变量：

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import type { TableRow } from './types';

@Component
export default class MyDataTable extends Vue {
  // 接收父组件传递的表格数据，加!表示必填
  @Prop({ required: true }) tableData!: TableRow[];
  
  // 表头可以作为可选props，默认用自己定义的
  @Prop() tableHeaders = [
    { text: 'ID', value: 'id' },
    { text: '姓名', value: 'name' },
    { text: '手机号', value: 'phone' }
  ];
}
</script>

最后再检查一遍 #

• 模板里用到的所有变量，要么是class里的响应式属性，要么是@Prop声明的组件属性，不能有没定义的变量
• Vuetify 0.1.7版本比较老，记得查对应版本的文档，别用新版的配置项（比如新版的items-per-page在老版可能叫别的）

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