vue3 + ts + element-plus ref获取节点报错 Property ‘xxx‘ does not exist on type ‘HTMLElement‘
vue3 + ts + element-plus ref获取节点报错 Property 'xxx' does not exist on type 'HTMLElement'
·
这样获取元素节点,虽然可以编译成功,但是会有红色下划线,很碍眼
报错信息提示类型“HtmleElement”上不存在属性“resetFields”
解决方法:
1.可以吧类型定义成any ,但是不推荐这样做
2.在vue的官方文档中Typescript支持里有告诉我们一个获取组件类型的方法,InstanceType<typeof 组件名称>
,使用方式如下代码
<template>
<el-form
ref="refRuleForm"
:model="ruleForm"
status-icon
label-position="top"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="username">
<el-input
v-model="ruleForm.username"
type="password"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input
v-model="ruleForm.pass"
type="password"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item style="text-align : left">
<el-button type="primary" @click="submitForm"
>登录</el-button
>
<el-button @click="resetForm">清空</el-button>
</el-form-item>
</el-form>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import {ElForm} from "element-plus"
export default defineComponent({
setup(){
const ruleForm = reactive({
pass: '',
username: '',
})
const refRuleForm = ref<InstanceType<typeof ElForm>>()
const resetForm = ():void => {
refRuleForm.value?.resetFields()
}
return {
refRuleForm,
resetForm
}
}
})
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)