javascript - 验证密码确认无效

我需要创建一个注册掩码，并要确保用户输入的两个密码相同，然后再继续，但是我无法在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忽略检查该字段是否为空的第一条规则。如果我删除此代码段，该规则将正常工作并检查该字段是否为空，但显然不会检查两个密码是否相同。

最佳答案

Vue组件的data must be a function，而不是箭头函数，因为箭头函数没有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。



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


这是Codepen