Vue 3表单输入触发Uncaught TypeError: Cannot set properties of undefined (setting 'lastname')错误求助

开发者阿泽

2026-4-27

解决输入框触发resetError时的TypeError问题

看起来你遇到的问题是在输入框输入字符触发resetError函数时，validationErrors.value.contactForm还未被初始化，导致无法设置对应字段的错误值为null。咱们来一步步修复这个问题：

问题根源

当用户第一次在输入框输入内容时，@input="resetError('lastname')"会立即执行，但此时validationErrors.value.contactForm可能还不存在（只有在第一次调用submitContact时才会被赋值为{}），尝试给undefined的对象设置属性自然会抛出Uncaught TypeError: Cannot set properties of undefined错误。

修复方案

方案1：提前初始化validationErrors的完整结构

确保validationErrors从一开始就包含contactForm空对象，这样无论何时调用resetError都能找到对应的对象：

// 假设validationErrors是ref类型，初始化时就包含contactForm
const validationErrors = ref({
  contactForm: {}
});

// 保留其他代码...
const contactData = reactive({ lastname: null, firstname: null, email: null, textarea: null, });
const resetError = (field) => { validationErrors.value.contactForm[field] = null; };
const active = ref(false);
const loading = ref(false);
// ...

方案2：在resetError函数中做安全检查

如果不想提前初始化结构，可以在resetError里先判断contactForm是否存在，不存在则先创建它：

const resetError = (field) => {
  // 先确保contactForm对象存在
  if (!validationErrors.value.contactForm) {
    validationErrors.value.contactForm = {};
  }
  validationErrors.value.contactForm[field] = null;
};