Vue3：如何将输入值绑定至personalInfo状态仓库并实现校验

核心问题1：输入值无法同步到personalInfo仓库 #

你遇到的Uncaught TypeError: Cannot set properties of undefined (setting 'value')错误，是因为属性访问语法错误：personalInfo.props.value试图访问personalInfo对象里的props属性，但personalInfo只有name/email/phone三个字段，props是组件的参数，你需要用方括号语法通过变量名动态访问对象属性。

修改Input.vue中的input元素：

<input
  :type="props.type"
  :id="props.value"
  class="border-2 p-2 rounded-md mt-1"
  :placeholder="props.placeholder"
  :value="personalInfo[props.value]" <!-- 新增：绑定仓库值到输入框 -->
  @input="personalInfo[props.value] = $event.target.value"
/>

说明：

• props.value是你传入的字段名（比如"name"），personalInfo[props.value]可以动态匹配对应字段
• 添加:value="personalInfo[props.value]"后，输入框会实时显示仓库的最新值，保证数据一致性

核心问题2：错误修复后errors无法重置为空 #

你的校验函数里用Object.assign(errors, { name: "", email: "", phone: "" });清空错误，但因为errors是reactive对象，Object.assign的修改可能无法被Vue响应式系统追踪。直接逐个赋值清空更可靠：

修改validation.js的清空逻辑：

export const personalInfoValidation = () => {
  // 替换原Object.assign，直接清空每个错误字段
  errors.name = "";
  errors.email = "";
  errors.phone = "";

  // 原校验逻辑保留，简化冗余判断
  if (!personalInfo.name) {
    errors.name = "Name - Please enter a valid name";
  }

  if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(personalInfo.email)) {
    errors.email = "Email - Please enter a valid email";
  }

  if (!/^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im.test(personalInfo.phone)) {
    errors.phone = "Phone - Please enter a valid phone number";
  }
};

同时需要在输入时触发校验，确保错误状态实时更新：
在Input.vue中添加输入处理函数并导入校验方法：

<template>
  <label
    :for="props.value"
    class="text-marine-blue text-xs font-bold mt-3 md:mt-5"
  >
    <slot></slot>
  </label>
  <input
    :type="props.type"
    :id="props.value"
    class="border-2 p-2 rounded-md mt-1"
    :placeholder="props.placeholder"
    :value="personalInfo[props.value]"
    @input="handleInput($event)"
  />
</template>

<script setup>
import { personalInfo } from "../../store/store";
import { personalInfoValidation } from "../../validation"; // 根据实际路径调整

const props = defineProps(["value", "placeholder", "type"]);

const handleInput = (event) => {
  personalInfo[props.value] = event.target.value;
  personalInfoValidation(); // 输入时触发校验
};
</script>

额外优化建议 #

• 可以给校验函数添加防抖逻辑，避免输入过程中频繁触发校验
• 如果需要更规范的状态管理，建议给仓库添加修改方法，而非直接修改reactive对象

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