Vue 数据表格无法连接数据库：解决“未找到结果”错误的完整教程

本文详解 vue + vuetify 数据表格显示“your search for '{{ search }}' found no results”的根本原因——并非数据库连接失败，而是前端 `v-data-table` 的 `slot="no-results"` 被强制始终显示，需动态绑定其可见性，并确保后端数据正确返回与前端正确接收。

在使用 Vuetify 的 时，出现 “Your search for {{ search }} found no results” 提示，并不意味着数据库连接失败或后端无数据，而极大概率是前端组件逻辑配置问题：slot="no-results" 的 :value 属性被硬编码为 true，导致该提示无论数据是否存在都会强制显示。

你当前的模板中存在关键错误：

  Your search for "{{ search }}" found no results.

✅ 正确做法是：将 :value 绑定到一个能反映真实数据状态的响应式变量，例如 Report.length === 0 —— 仅当 Report 数组为空（即未加载数据、加载失败或查询结果为空）时才显示提示。

✅ 正确配置 no-results 插槽

  

  
  
    Your search for "{{ search }}" found no results.
  

⚠️ 注意：Vuetify 2.x 中 slot="items" 和 slot="no-results" 已被 v-slot: 语法替代（如上例所示），建议升级写法以保证兼容性与可维护性。

? 同时排查真实的数据流问题

虽然 no-results 显示是前端配置问题，但若 Report 始终为空，则需检查完整链路：

聚蜂消防BeesFPD

关注消防领域的智慧云平台

下载

立即学习“前端免费学习笔记（深入）”；

1. 后端接口是否正常返回数据？
   在浏览器开发者工具 → Network 标签中，检查 getReport(ts) 触发的请求（如 GET /api/report?endDate=...）：

   • HTTP 状态码是否为 200？
   • 响应体是否为合法 JSON 数组（如 [{"col1":"A","col2":"B"},...]）？
   • 是否存在 CORS、500 错误或空响应？

2. Vue 方法中是否正确赋值？
   确保 getReport() 方法内通过 axios 或 fetch 获取数据后，正确更新 this.Report：

   methods: {
     getReport(ts) {
       axios.get(`/api/balance-report?end_date=${this.endDate}`)
         .then(res => {
           // ✅ 关键：确保后端返回的是数组，且结构匹配 headers 的 value 字段
           this.Report = Array.isArray(res.data) ? res.data : [];
         })
         .catch(err => {
           console.error('Failed to load report:', err);
           this.Report = []; // 显式清空，触发 no-results 显示
         });
     }
   }

3. 数据库连接类本身无直接问题，但建议增强健壮性
   你的 Database::db() 方法虽能连接，但缺少字符集声明，可能导致中文乱码或隐式失败。推荐补充 charset=utf8mb4：

   $db = "mysql:host=$host;dbname=$dbName;charset=utf8mb4";
   $pdo = new PDO($db, $userName, $password, [
       PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
       PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
   ]);

✅ 最佳实践总结

修复后，表格将：

• 数据加载成功 → 正常渲染；
• 请求失败或返回空数组 → 显示“未找到结果”；
• 搜索无匹配项 → 仍显示搜索提示（这是 :search 的默认行为，属正常）。

从此告别“假性数据库错误”，让问题定位回归真实链路。