如何修复Vue typescript属性不存在错误

Question

在 vue3 typescript 中，我遇到 HtmlElement 错误中不存在某些属性。请帮我解决这个问题。

(property) dataButtons: string

(property) data-buttons: string

Type '{ class: string; dataButtons: string; "data-buttons": string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.

Property 'dataButtons' does not exist on type 'HTMLAttributes<HTMLDivElement>'.ts(2322)

Answer 1

提供出现此问题的代码将有助于其他人调试它。

你用过refVue组件吗？如果是这样，结果指向组件，而不是底层元素。你需要做的是这样的：

<template>
  <MyComponent :ref="(c: any) => c?.$el && (myComponent = c?.$el)">
</template>

<script setup lang="ts">
const myComponent = ref<HTMLElement | null>(null);
</script>

上面假设您正在使用带有 Composition API 的 Vue 3。