传递keepValueOnUnmount后动态修改useField的name仍丢失表单值，如何解决？

当动态修改useField的name参数时，即便已经给useField传入了keepValueOnUnmount选项，表单中与旧name路径同名的属性仍然会被移除。有没有办法阻止这种情况？

问题根源 #

vee-validate中，当useField的name动态变更时，旧的字段实例会被销毁。即便开启keepValueOnUnmount，该选项仅针对组件整体卸载场景生效，无法覆盖动态切换字段路径时的自动清理逻辑，导致对应路径的表单值被移除。

解决方案 #

绕过useField的自动清理逻辑，直接通过useForm提供的API手动操作表单值：

修改Question.vue组件，不再依赖动态变化的useField name，转而直接从表单数据源中读写对应路径的值：

<template>
  <input v-model="currentValue" placeholder="Question" />
</template>

<script>
import { computed } from "vue";
import { useForm } from "vee-validate";

export default {
  props: {
    questionIdx: Number,
  },
  setup(props) {
    const { values, setValue } = useForm();

    // 通过计算属性绑定输入框，手动处理值的读写逻辑
    const currentValue = computed({
      get() {
        return values.questions[props.questionIdx]?.text || "";
      },
      set(newVal) {
        setValue(`questions[${props.questionIdx}].text`, newVal);
      },
    });

    return { currentValue };
  },
};
</script>

原理说明 #

这种方式直接对接表单的核心数据源，脱离了单个useField实例的生命周期管理。切换问题索引时，不会触发旧字段的清理逻辑，所有问题的text属性都会被完整保留，提交表单时能获取到全部值。

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