将PouchDB文档对象绑定到Vuetify v-data-table时遇到问题

这个警告的原因非常明确：Vuetify的v-data-table组件要求items属性必须是一个数组，但你从PouchDB获取并赋值的数据是一个对象，直接触发了组件的类型检查失败警告。

问题根源 #

PouchDB的allDocs({include_docs: true})方法返回的并不是直接的文档数组，而是一个包含多个属性的复合对象——真正的文档列表嵌套在对象的rows数组里，每个row对象的doc字段才是你要展示的单条文档数据。

解决步骤 #

你只需要在获取数据后，把返回对象里的rows数组提取出来，再映射出每个row的doc值，就能得到符合v-data-table要求的数组了。

修改你的数据获取代码：

// 原来的错误写法（直接赋值了PouchDB返回的完整对象）
db.allDocs({include_docs: true}).then(response => {
  this.items = response;
}).catch(err => {
  console.error(err);
});

// 修改后的正确写法
db.allDocs({include_docs: true}).then(response => {
  // 提取rows数组，并映射出每个row的doc属性作为表格项
  this.items = response.rows.map(row => row.doc);
}).catch(err => {
  console.error(err);
});

额外优化建议 #

为了提升用户体验，你可以添加一个加载状态变量，配合v-data-table的loading属性使用：

// 在组件的data选项里定义加载状态
data() {
  return {
    items: [],
    isLoading: false
  }
}

// 请求数据时更新状态
this.isLoading = true;
db.allDocs({include_docs: true}).then(response => {
  this.items = response.rows.map(row => row.doc);
}).catch(err => {
  console.error(err);
}).finally(() => {
  this.isLoading = false;
});

在模板里绑定loading属性：

<v-data-table
  :items="items"
  :loading="isLoading"
  <!-- 你的其他表格配置属性 -->
>
<!-- 表格列定义等内容 -->
</v-data-table>

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