Vue3-ts报错:类型“never”上不存在属性“resetFields“
在 Vue3 项目中使用表单的时候,通常有验证环节,在 script 中:
const showModal = ref(false);
const isRegistering = ref(false); // 新增状态
const formRef = ref(null);
const formState = ref({
username: '',
password: '',
repeatPassword: '' // 仅在注册时使用
});
const handleSubmit = () => {
if (formRef.value) {
formRef.value.validate((errors: any) => {
if (!errors) {
console.log('提交的数据', formState.value);
// 在这里添加提交表单的逻辑
}
});
} else {
console.error('表单数据不存在');
}
};
const handleReset = () => {
if (formRef.value) {
formRef.value.resetFields();
} else {
console.error('表单数据不存在');
}
};
此时会出现报错:
类型“never”上不存在属性“resetFields“
问题原因
const formRef = ref(null);
此时formRef.value 的类型是 never ,要避免这个错误,将 ref 的初始值改为空即可。
解决方式
修改formRef
const formRef = ref();
完整代码(简单的注册登录组件)
<template>
<div class="container">
<n-modal v-model:show="showModal" title="登录/注册">
<div class="form">
<p>欢迎使用Promptate</p>
<n-form ref="formRef" :model="formState" :rules="rules">
<n-form-item label="用户名" path="username">
<n-input v-model:value="formState.username" placeholder="请输入用户名" />
</n-form-item>
<n-form-item label="密码" path="password">
<n-input v-model:value="formState.password" placeholder="请输入密码" type="password" />
</n-form-item>
<!-- 注册时添加重复密码字段 -->
<n-form-item v-if="isRegistering" label="重复密码" path="repeatPassword">
<n-input v-model:value="formState.repeatPassword" placeholder="请再次输入密码" type="password" />
</n-form-item>
<div class="btnGroup">
<n-button @click="handleSubmit">{{ isRegistering ? '注册' : '登录' }}</n-button>
<n-button @click="handleReset">重置</n-button>
</div>
</n-form>
<div class="toggle-action" @click="toggleForm">
{{ isRegistering ? '已有账号?登录' : '没有账号?注册' }}
</div>
</div>
</n-modal>
<n-button @click="showModal = true" class="btn">登录/注册</n-button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const showModal = ref(false);
const isRegistering = ref(false); // 新增状态
const formRef = ref();
const formState = ref({
username: '',
password: '',
repeatPassword: '' // 仅在注册时使用
});
// 根据当前模式(登录/注册)调整验证规则
const rules = ref({
username: {
required: true,
message: '请输入用户名',
trigger: 'blur'
},
password: {
required: true,
message: '请输入密码',
trigger: 'blur'
},
repeatPassword: isRegistering.value ? {
required: true,
message: '请再次输入密码',
trigger: 'blur'
} : {}
});
const handleSubmit = () => {
if (formRef.value) {
formRef.value.validate((errors: any) => {
if (!errors) {
console.log('提交的数据', formState.value);
// 在这里添加提交表单的逻辑
}
});
} else {
console.error('表单数据不存在');
}
};
const handleReset = () => {
if (formRef.value) {
formRef.value.resetFields();
} else {
console.error('表单数据不存在');
}
};
const toggleForm = () => {
isRegistering.value = !isRegistering.value;
};
</script>
<style scoped lang="scss">
.btn {
margin-left: 10px;
}
.container {
display: flex;
align-items: center;
text-align: center;
}
p {
text-align: center;
font-size: 20px;
}
.form {
background-color: white;
width: 400px;
padding: 20px 50px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btnGroup {
display: flex;
justify-content: center;
gap: 16px; /* 这会在按钮之间创建16px的间隙 */
}
.toggle-action {
margin-top: 20px;
text-align: center;
color: #409eff;
cursor: pointer;
}
</style>