Vue.js中如何避免空对象覆盖输入框用户输入内容

1. 确保表单数据的响应式声明正确 #

首先要确认你使用reactive或ref正确创建了响应式表单数据，这是获取用户输入的基础：

// 使用reactive（推荐用于对象类型）
import { reactive } from 'vue';

const formData = reactive({
  username: '',
  email: '',
  // 其他表单字段
});

// 或使用ref（需通过.value访问）
// import { ref } from 'vue';
// const formData = ref({ username: '', email: '' });

2. 修正onFormSubmit的emit逻辑 #

提交时必须传递实际的表单数据对象，而不是空对象。同时结合Vuelidate的验证逻辑，确保验证通过后再提交：

import { defineEmits } from 'vue';
import { useVuelidate } from '@vuelidate/core';

const emit = defineEmits<{
  submit: [value: Record<string, unknown>]
}>();

// 假设v$是Vuelidate的实例
const v$ = useVuelidate(rules, formData);

const onFormSubmit = async () => {
  // 执行表单验证
  const isValid = await v$.value.$validate();
  if (!isValid) return;

  // 传递表单数据（用展开运算符创建副本，避免响应式代理影响父组件）
  emit('submit', { ...formData });
  // 如果用ref，要写成 { ...formData.value }
};

3. 检查表单绑定与Vuelidate规则匹配 #

确保输入框的v-model正确绑定到formData的字段，且Vuelidate规则与表单字段结构一致：

<!-- 模板中的输入绑定 -->
<input 
  v-model="formData.username" 
  type="text"
  placeholder="用户名"
/>
<input 
  v-model="formData.email" 
  type="email"
  placeholder="邮箱"
/>

// Vuelidate规则示例
import { required, email } from '@vuelidate/validators';

const rules = {
  username: { required },
  email: { required, email }
};

4. 排查是否有意外覆盖formData的逻辑 #

在onFormSubmit开头添加日志，确认提交时formData是否包含用户输入的值：

const onFormSubmit = async () => {
  console.log('当前表单数据:', formData); // 检查数据是否正确
  // 后续验证和提交逻辑
};

如果日志显示formData为空，排查是否有其他函数（比如重置表单的逻辑）在提交前意外清空了数据。

内容的提问来源于stack exchange，提问作者gaelherzog