Vue3中使用Vee-Validate后V-Model失去响应问题求助

你的问题核心是Vee-Validate的字段状态管理和Vue原生v-model的更新逻辑冲突，导致父组件的form数据无法同步。具体问题点和修复步骤如下：

问题根源 #

1. 子组件中，useField返回的value和父组件传入的modelValue没有双向绑定，父组件无法感知子组件字段值的变化。
2. input元素同时绑定了自定义@input事件和validationListeners中的input事件，后者覆盖了前者，导致update:modelValue事件无法触发。
3. 冗余的localInputValue变量未实际参与逻辑，属于无效代码。

修复后的子组件代码 #

<template>
  <div class="form-control">
    <label class="label">
      <span class="label-text">{{ $t(label) }}</span>
    </label>
    <input
      type="text"
      class="input input-bordered"
      :value="fieldValue"
      v-on="validationListeners"
    />
    <span>{{ errorMessage }}</span>
  </div>
</template>

<script setup>
import { useField } from "vee-validate";
import { computed, watch } from "vue";

const props = defineProps({
  label: {
    type: [String, Boolean],
    default: false,
  },
  modelValue: {
    type: String,
    default: "",
  },
  required: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:modelValue"]);

// 自定义验证规则
const validateField = (value) => {
  if (!value && props.required) {
    return "This is required";
  }
  return true;
};

// 初始化字段，使用父组件传入的modelValue作为初始值
const { errorMessage, value: fieldValue, handleChange } = useField(
  "firstName", // 建议用唯一字段名，可与父组件字段对应或从props传入
  validateField,
  {
    validateOnValueUpdate: false,
    initialValue: props.modelValue, // 绑定初始值
  }
);

// 监听子组件字段值变化，同步到父组件v-model
watch(fieldValue, (newVal) => {
  emit("update:modelValue", newVal);
});

// 监听父组件v-model变化，同步到子组件字段（处理父组件主动修改值的场景）
watch(() => props.modelValue, (newVal) => {
  fieldValue.value = newVal;
});

const validationListeners = computed(() => {
  const baseListeners = {
    blur: handleChange,
    change: handleChange,
  };

  // 根据验证状态调整input事件的验证策略
  if (!errorMessage.value) {
    return {
      ...baseListeners,
      input: (e) => {
        fieldValue.value = e.target.value;
        handleChange(e, false); // 不立即显示错误
      },
    };
  }

  return {
    ...baseListeners,
    input: (e) => {
      fieldValue.value = e.target.value;
      handleChange(e); // 实时验证显示错误
    },
  };
});
</script>

关键修改说明 #

1. 双向绑定字段值：

   • 通过useField的initialValue将父组件的modelValue作为初始值。
   • 用watch监听fieldValue变化，触发update:modelValue事件同步到父组件；同时监听父组件modelValue的变化，同步更新子组件的fieldValue，确保双向绑定生效。

2. 合并事件逻辑：

   • 移除input上单独的@input事件，将值更新逻辑整合到validationListeners的input事件中，避免事件冲突。
   • 在input事件中先更新fieldValue，再调用handleChange执行验证，保证值更新和验证逻辑顺序正确。

3. 优化字段命名：

   • 将useField的第一个参数改为唯一字段名，方便Vee-Validate管理字段状态，也便于后续多字段验证的场景。

4. 移除冗余代码：

   • 删除未使用的localInputValue、labelName以及无关的store和reactive导入，简化代码结构。

父组件无需修改 #

原父组件的v-model写法保持不变即可，修复后的子组件会自动同步数据到form.salutation.firstName。

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