Vue 中 ‘ariaHidden’ 属性报错的解决方案

在 Vue 项目开发过程中，你可能会遇到类似 “Property ‘ariaHidden’ does not exist on type ‘ElementAttrs‘” 的错误提示。这通常发生在尝试在 Vue 组件中使用 aria-hidden 属性时，例如：

<button type="button" class="close" data-dismiss="alert" aria-label="Close">   <span aria-hidden="true">&times;</span> </button>

这个错误表明 TypeScript 编译器无法识别 ariaHidden 属性，尽管它在 HTML 中是一个有效的属性。 实际上，错误信息已经提示了你，应该使用aria-hidden而不是ariaHidden。

原因分析：

这个问题通常与 Volar 插件的版本有关。在某些较新的 Volar 版本（例如 0.36），可能会出现对 HTML 属性的类型定义不准确的问题，导致编译器无法正确识别 aria-hidden 属性。

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

解决方案：

目前最有效的解决方案是降级 Volar 插件的版本。你可以按照以下步骤操作：

1. 卸载当前 Volar 插件： 在 VS Code 中，找到 Volar 插件并选择 “Uninstall”。
2. 安装指定版本的 Volar 插件： 安装 0.35或者更早的版本，可以规避这个问题。
3. 重启 VS Code： 确保新的插件版本生效。

通过降级 Volar 插件，你应该能够解决 aria-hidden 属性的报错问题。

替代方案

将ariaHidden修改为aria-hidden。

注意事项：

• 降级插件只是一个临时解决方案。建议密切关注 Volar 插件的官方更新，以便在修复发布后及时升级。
• 在升级 Volar 插件之前，请务必备份你的项目，以防止出现意外情况。

总结：

在 Vue 项目中使用 aria-hidden 属性时遇到 “Property ‘ariaHidden’ does not exist” 错误，通常是由于 Volar 插件版本问题导致的。通过降级 Volar 插件版本，可以快速解决此问题。同时，建议关注 Volar 的后续更新，以便在官方修复发布后及时升级。记住，在升级插件之前，务必备份你的项目。