vuetify 的 `v-data-table` 显示“your search for ‘{{ search }}’ found no results”并非数据库连接失败的直接报错，而是因 `slot="no-results"` 的 `:value` 被硬编码为 `true`，导致提示始终显示；真实问题在于前端未正确加载数据（如 api 调用缺失、后端返回空数组或错误未捕获）。
在你提供的 Vue 代码中，
✅ 正确做法是将 :value 动态绑定到数据状态上，例如：
<v-alert slot="no-results" :value="Report.length === 0" color="error" icon="warning">
Your search for "{{ search }}" found no results.
</v-alert>这样，只有当 Report 数组确实为空（尚未加载、加载失败或后端返回空）时，提示才会出现，符合语义逻辑。
⚠️ 但请注意：这仅修复了 UI 层的误导性提示，不解决根本的数据缺失问题。你仍需确保：
立即学习“前端免费学习笔记（深入）”；
- 后端接口正常响应：检查 PHP 接口（如 /api/report.php）是否真正返回了 JSON 数据（建议用浏览器直接访问该接口 URL 验证）；
- Vue 实例发起请求：当前 UsageReport 实例中缺少数据获取逻辑（如 mounted() 中调用 axios.get() 或 fetch()），Report: [] 始终为空；
- 数据库连接健壮性：你提供的 Database::db() 方法虽基础可用，但存在安全隐患与容错缺陷：
public static function db()
{
$host = 'localhost';
$dbName = 'newdata';
$userName = 'root';
$password = ''; // ⚠️ 生产环境请从 $_ENV 或 .env 加载
$dsn = "mysql:host=$host;dbname=$dbName;charset=utf8mb4";
$options = [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
PDO::ATTR_EMULATE_PREPARES => false,
];
try {
return new PDO($dsn, $userName, $password, $options);
} catch (PDOException $e) {
error_log("DB Connection failed: " . $e->getMessage());
throw new RuntimeException("Unable to connect to database", 500);
}
}- 前端请求补全示例（在 Vue 实例中添加）：
var UsageReport = new Vue({
el: '#UsageReport',
data() {
return {
Report: [], // 初始为空，由接口填充
search: '',
headers: [
{ text: 'Value 1', value: 'col1' }, // ⚠️ 注意：value 值需与后端字段名严格一致（去掉空格！）
{ text: 'Value 2', value: 'col2' },
{ text: 'Value 3', value: 'col3' },
{ text: 'Value 4', value: 'col4' },
{ text: 'Value 5', value: 'col5' }
],
// ...其他 data
}
},
mounted() {
this.getReport(); // 页面加载后自动拉取数据
},
methods: {
getReport() {
axios.get('/api/balance-report.php') // 替换为你的实际接口路径
.then(response => {
this.Report = response.data; // 确保后端返回的是数组格式 [{col1: ..., col2: ...}, ...]
})
.catch(error => {
console.error('Failed to load report:', error);
this.Report = []; // 明确置空，触发 no-results 提示
});
}
}
});? 总结：
- 首要修复：将 :value="true" 改为 :value="Report.length === 0"，消除误提示；
- 根本解决：补全前端数据请求逻辑 + 验证后端接口可用性 + 强化数据库连接健壮性；
- 额外注意：headers.value 字段名务必与后端返回的 JSON 键名完全一致（避免尾部空格等低级错误），否则表格列将渲染为空。
