时间戳

首页 > 解决方案 > Vuetify 密码确认不起作用

javascript - Vuetify 密码确认不起作用

问题描述

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

标签： javascripthtmlvue.jsvuetify.js

解决方案

  1. Vue 组件data 必须是 function，而不是箭头函数，因为箭头函数没有this. 来自 Vue.js文档：

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

  1. 您正在引用pw1并且pw2未在data.

这是代码笔

推荐阅读