验证密码确认无效

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' v => v === this.pw1 || 'Passwords do not match'甚至会使Vuetify忽略检查该字段是否为空的第一条规则。 如果我删除此代码段，该规则将正常运行，并检查该字段是否为空，但显然不会检查两个密码是否相同。

Answer 1

1. Vue组件的data 必须是一个函数 ，而不是箭头函数，因为箭头函数没有this 。 从Vue.js docs ：

不要在options属性或回调中使用箭头函数，例如created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod()) 。 由于箭头函数没有this ，它将被视为任何其他变量，并在父作用域中进行词汇查找，直到找到为止，这通常会导致错误，例如Uncaught TypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function 。

2. 您正在引用未在data定义的pw1和pw2 。

这是Codepen