Vue3项目中表单对象属性cust_feedback_rating值更新异常

核心问题 #

页面中cust_feedback_rating显示为undefined，但控制台能输出正确值，说明数据本身是正确的，但视图层没有和数据正确同步，大概率是表单组件绑定逻辑或v-if导致的组件重建问题。

具体解决办法 #

1. 修复表单组件的绑定逻辑（针对VeeValidate场景）

你使用的<Field>组件属于表单校验库（如VeeValidate），它的v-model应绑定表单库提供的values对象，而非自定义的form对象，否则会出现数据不同步：

<template>
  <td v-if="showFilled === 2 && !anyDedicatedProject && tl_rating">
    <div>
      <!-- 绑定表单库的values，而非自定义form -->
      <Field type="number" :min="0" :max="5" name="cust_feedback_rating"
        class="form-control"
        :class="{ 'is-invalid': errors.cust_feedback_rating }"
        v-model="values.cust_feedback_rating"></Field>
      <div class="invalid-feedback">{{ errors.cust_feedback_rating }}</div>
    </div><br>
    <div>
      <Field type="number" :min="0" :max="5" name="cust_feedback_eff_rating"
        disabled class="form-control"
        v-model="values.cust_feedback_eff_rating"></Field>
    </div>
  </td>
</template>

<script>
import { useForm } from 'vee-validate';

export default {
  setup() {
    // 初始化表单并设置默认值
    const { values, errors, defineField } = useForm({
      initialValues: {
        cust_feedback_rating: 0,
        cust_feedback_eff_rating: 0,
        // 其他表单字段...
      }
    });

    // 可选：定义字段校验规则
    defineField('cust_feedback_rating', value => {
      if (value === undefined) return '请输入评分';
      if (value < 0 || value > 5) return '评分范围为0-5';
    });

    return { values, errors };
  }
};
</script>

2. 替换v-if为v-show避免组件重建

v-if会完全销毁/重建<td>内部的组件，导致<Field>初始化时无法正确读取数据。改用v-show仅隐藏元素，保留组件状态：

<td v-show="showFilled === 2 && !anyDedicatedProject && tl_rating">
  <!-- 内部内容不变 -->
</td>

3. 修正watch中的赋值逻辑

你当前在watch里直接修改form.cust_feedback_rating，会绕过表单组件的响应式监听。如果需要强制设置值，应使用表单库的官方API（如VeeValidate的setValue）：

<script>
import { useForm } from 'vee-validate';

export default {
  setup() {
    const { values, errors, setValue } = useForm({
      initialValues: { cust_feedback_rating: 0 }
    });

    // 监听评分变化，强制设为5
    watch(() => values.cust_feedback_rating, (newVal) => {
      setValue('cust_feedback_rating', 5);
      console.log('data', values.cust_feedback_rating);
    });

    return { values, errors };
  }
};
</script>

4. 检查基础数据定义

确认formEffectiveData在data中已正确初始化，避免因对象未定义导致的连锁问题：

data() {
  return {
    form: { /* ... */ },
    formEffectiveData: {
      cust_feedback_eff_rating: 0
    }
  };
}

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