Vuetify注册表单填写完成后按钮仍禁用问题排查

我正在给登录和注册表单添加验证功能，预期所有表单验证通过后提交按钮可点击，但注册表单填写完成后按钮仍处于禁用状态。登录表单用了相同逻辑，能正常启用按钮完成登录，不清楚注册表单问题出在哪里。

组件Data代码 #

data() {
    return {
      email: "",
      password: "",
      confirmPassword: "",
      err_message: "",
      errorMessages: "",
      err_show: false,
      showPass: false,
      validate: false,
      showConPass: false,
      rules: {
        required: (value) => !!value || "Required is requred.",
        min: (v) => v.length >= 6 || "Min 6 characters",
      },
      conPass: [
        (v) => !!v || "Required is requred.",
        (v) => v === this.password || "Passwords do not match",
      ],
      emailRules: [
        (value) => {
          if (value) return true;

          return "E-mail is requred.";
        },
        (value) => {
          if (/.+@.+\..+/.test(value)) return true;

          return "E-mail must be valid.";
        },
      ],
    };
  },

组件模板代码 #

<v-card class="mx-auto py-10 px-10 mt-10" max-width="500" outlined>
    <ErrorMessage :err_show="err_show" :err_message="err_message" />
    <v-form v-model="validate">
      <v-card-title>Register</v-card-title>

      <v-text-field
        v-model="email"
        :rules="emailRules"
        :error-messages="errorMessages"
        label="Email"
        placeholder="example@gmail.com"
        required
      ></v-text-field>

      <v-text-field
        class="text__Field"
        v-model="password"
        :append-inner-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'"
        :rules="[rules.required, rules.min]"
        :type="showPass ? 'text' : 'password'"
        name="input-10-1"
        label="Password"
        hint="At least 6 characters"
        counter
        @click:append-inner="showPass = !showPass"
      ></v-text-field>

      <v-text-field
        class="text__Field"
        v-model="confirmPassword"
        :append-inner-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'"
        :rules="conPass"
        :type="showConPass ? 'text' : 'password'"
        name="input-10-1"
        label="Confirm Password"
        hint="At least 6 characters"
        counter
        @click:append-inner="showConPass = !showConPass"
      ></v-text-field>
    </v-form>

    <v-card-actions>
      <v-btn :disabled="!validate" elevation="1" @click="register"
        >Register</v-btn
      >
    </v-card-actions>
  </v-card>

问题原因及修复方案 #

核心问题 #

1. 确认密码规则的this绑定失效：在conPass规则中，直接使用this.password无法正确获取最新的密码值。因为规则函数是在data初始化时定义的，此时的this指向初始化时的data对象，后续密码更新不会同步到该函数，导致确认密码的匹配验证始终失效。
2. 确认密码输入框的图标绑定错误：确认密码框的append-inner-icon绑定了showPass（密码框的显示状态），应该绑定showConPass，不过这不是按钮禁用的直接原因。

修复步骤 #

1. 修正确认密码的规则定义

把conPass改为计算属性，确保能实时获取最新的password值：

// 替换data中的conPass定义，在computed中添加
computed: {
  conPass() {
    return [
      (v) => !!v || "Required is required.",
      (v) => v === this.password || "Passwords do not match"
    ];
  }
}

或者直接在模板中定义规则（无需修改data）：

<v-text-field
  v-model="confirmPassword"
  :append-inner-icon="showConPass ? 'mdi-eye' : 'mdi-eye-off'"
  :rules="[
    (v) => !!v || 'Required is required.',
    (v) => v === password || 'Passwords do not match'
  ]"
  :type="showConPass ? 'text' : 'password'"
  name="input-10-1"
  label="Confirm Password"
  hint="At least 6 characters"
  counter
  @click:append-inner="showConPass = !showConPass"
></v-text-field>

注意：原代码中错误提示文本"Required is requred."存在拼写错误，建议修正为"Required is required."

2. 修复确认密码输入框的图标绑定

<v-text-field
  ...
  :append-inner-icon="showConPass ? 'mdi-eye' : 'mdi-eye-off'"
  ...
></v-text-field>

3. 确保密码变化时触发确认密码重新验证

给密码输入框添加@input事件，手动触发表单验证：

<!-- 给v-form添加ref -->
<v-form v-model="validate" ref="registerForm">
  ...
  <v-text-field
    v-model="password"
    ...
    @input="$refs.registerForm.validate()"
  ></v-text-field>
  ...
</v-form>

逻辑说明 #

登录表单正常是因为没有依赖其他字段的联动验证，而注册表单的确认密码规则依赖密码字段。当密码更新时，确认密码的规则不会自动重新执行，导致表单判定确认密码未通过验证，validate始终为false，按钮保持禁用状态。

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