javascript - Vuetify 密码确认不起作用

Question

我需要创建一个注册掩码，并且想在继续之前确保用户输入的两个密码相同，但我不知道如何在 Vuetify 中执行此操作。

我尝试为其创建规则，但似乎不起作用。

这是我的代码:

模板:

    <v-row>
      <v-col>
        <v-flex md5>
          <v-text-field v-model="pw1"
            label="Password"
            type="password"
            :rules="pwdRules"
          ></v-text-field>
        </v-flex>
      </v-col>

      <v-col>
        <v-flex md5>
          <v-text-field v-model="pw2"
            label="Confirm Password"
            type="password"
            :rules="pwdConfirm"
          ></v-text-field>
        </v-flex>

      </v-col>
    </v-row>

脚本:

export default {
    data: () => ({
      pwdRules: [ v => !!v || 'Password required' ],
      pwdConfirm:[ v => !!v || 'Confirm password', v => v === this.pw1 || 'Passwords do not match'],
    }),

有趣的是，如果我使用这个代码片段 v => v === this.pw1 || 'Passwords do not match'它甚至使 Vuetify 忽略检查字段是否为空的第一条规则。如果我删除此代码片段，规则将正常工作并检查该字段是否为空，但它显然不会检查两个密码是否相同。

Answer 1

1. Vue 组件的数据 must be a function ，不是箭头函数，因为箭头函数没有 this。来自 Vue.js docs :

Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()). Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.

您引用的 pw1 和 pw2 未在 data 中定义。

这里是Codepen