Vue中表单v-model初始默认值不生效问题排查

场景说明 #

我在Vue项目中创建了带多字段的表单，通过Form类设置了默认值，希望编辑后能保存更新值，同时在子组件中渲染这些字段，但初始状态下email_subject的Default Value、header_text的Header text这些默认值无法显示。

相关代码 #

父组件data部分 #

data () {
  return {
    form: new Form({
      email_subject: 'Default Value',
      brand_name: '',
      header_text: 'Header text'
    })
  }
}

父组件模板部分 #

<div>
   <label class="form-control-label">
     {{ $t('labels.email_subject') }}
   </label>

   <span v-if="!isEditable" class="font-weight-400 margin-left-5">{{ form.email_subject }}</span>

   <div class="from-group">
       <v-text-field
        v-if="isEditable"
        v-model="form.email_subject"
        name="email_subject"
        class-name="form-control text-field"
        type="text"
       />

        <div v-if="form.hasError('email_subject')" class="form-control-error-list">
          <ul>
             <li v-for="error in form.collectError('email_subject')" :key="error">{{ error }}</li>
          </ul>
        </div>
      </div>
    </div>

子组件与调用代码 #

<!-- 子组件模板 -->
<div class="text-left mt-3 pl-1 ">
  {{ subject }}
</div>

<!-- 子组件props（原代码不完整） -->
props: {
subject: {
  type: String,
  required: true
},

<!-- 父组件调用子组件 -->
<email-phone
 :subject="form.email_subject"
 :brand="form.brand_name"
 :header="form.header_text"
/>

排查与解决步骤 #

1. 确保Form实例是Vue响应式对象 #

Vue无法追踪普通JS对象的属性变化，若你的Form是自定义类或非响应式实例，需要转为响应式：

• Vue2 中用this.$vue.observable()包裹：

data () {
  const rawForm = new Form({
    email_subject: 'Default Value',
    brand_name: '',
    header_text: 'Header text'
  })
  return {
    form: this.$vue.observable(rawForm)
  }
}

• Vue3 中用reactive()包裹：

import { reactive } from 'vue'

// ...
data () {
  const rawForm = new Form({/* 默认值 */})
  return {
    form: reactive(rawForm)
  }
}

如果是第三方Form库（如Inertia.js的Form），需确认是否按文档要求初始化，部分库需调用reset()同步默认值。

2. 修复模板拼写错误 #

父组件中<div class="from-group">是拼写错误，改为<div class="form-group">，避免样式异常导致元素隐藏。

3. 补全子组件的props定义 #

原代码中子组件仅定义了subject的props，但父组件传了brand和header，需补全定义，否则传值会被忽略：

<script>
export default {
  props: {
    subject: {
      type: String,
      required: true
    },
    brand: {
      type: String,
      required: true
    },
    header: {
      type: String,
      required: true
    }
  }
}
</script>

4. 检查isEditable的初始值 #

父组件中默认值通过<span v-if="!isEditable">展示，若isEditable初始为true，该span不会显示，需确保初始状态正确：

data () {
  return {
    isEditable: false, // 初始非编辑态，显示默认值
    form: /* ... */
  }
}

5. 验证Form实例的初始值 #

在父组件mounted钩子中打印Form实例，确认默认值是否被正确赋值：

mounted () {
  console.log('Form初始值:', this.form)
}

若打印结果中没有目标字段，需检查Form类的构造函数，确保它将默认值挂载到实例上：

class Form {
  constructor(defaults) {
    // 将默认值复制到实例
    Object.assign(this, defaults)
    // ...其他逻辑（如验证规则）
  }
  // ...hasError、collectError等方法
}

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