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'],
    }),

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

Answer 1

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

不要在选项属性或回调上使用箭头函数，例如 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。

1. 您正在引用pw1 和pw2，它们未在data 中定义。

这里是Codepen