Vue.js 2表单默认选中选项后提交按钮未激活的问题排查

我在Vue.js 2中编写了如下表单：

<form id="trial-form" action="post" class="trial">
    <div class="form-field required selectbox">
        <select name="region" id="region" label="region" v-validate="'required'" v-model="region" class="required selectbox region" aria-label="Region">
            <option value="">{{ $t("region") }}</option>
            <p-option v-for="regionOption in regionList" :key="regionOption.region" :value="regionOption.plane">{{$t(regionOption.region)}}</p-option>
        </select>
        <p-button size="lrg" align="left" type="submit" :disabled="isFormInvalid" @click.prevent="validateBeforeSubmit">{{ $t("trialSubmit") }}</p-button>
    </div>
</form>

通过以下代码硬编码设置v-model的默认值：

mounted () {
  this.region = 'US'
}

此时页面下拉框已默认选中US，但提交按钮处于禁用状态，仅手动切换下拉选项后按钮才会激活。明明下拉框已默认选中，用户无需手动操作即可提交，请问问题原因是什么？

你使用的v-validate（推测是vee-validate 2.x插件）默认只会监听表单元素的用户交互触发的事件（比如change、input）来执行校验逻辑。而在mounted钩子中直接通过代码赋值region，属于非用户交互的数据更新，不会触发校验插件的自动校验流程，导致校验状态仍停留在初始的“未通过”状态，isFormInvalid保持为true，所以提交按钮处于禁用状态。

有两种常见的解决方式：

1. 手动触发校验
   在mounted中赋值后，主动调用校验方法更新字段的校验状态：

mounted () {
  this.region = 'US'
  // 触发单个字段的校验
  this.$validator.validate('region')
}

2. 初始化时直接赋值
   将region的默认值直接写在data选项中，组件初始化时校验插件会自动识别初始值并完成校验：

data() {
  return {
    region: 'US'
  }
}

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