v-textfield 规则找不到 data 中声明的元素

Question

我正在使用

Vue3

和

Vuetify

，并且在为确认密码字段的

v-textfield

制定规则时，出现以下错误：

我尝试比较密码字段的值和确认密码字段的值，两者都与

v-textfield

和

v-model

相关，但在确认密码规则中，密码结果的变量未定义。
这是来源。

数据与规则和变量：

data: () => ({
  // Credentials
  username: '',
  password: '',
  confirmPassword: '',

  passwordRules: [
    (value) => {
      if (value?.trim().length > 0) return true
      else return 'Password is required.'
    },
  ],
  confirmPasswordRules: [
    (value) => {
      if (value?.trim().length > 0) {
        // TODO: ERROR (this.password is undefined)
        if(value === this.password) {
          return true
        }
        else return 'Passwords do not match.'
      }
      else return 'Confirm password is required.'
    },
  ],
}),

我在

v-textfield

中写入字符时，每次都会出现该错误，因为它在规则中：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'password')
    at confirmPasswordRules

谢谢！

Answer 1

OP 将他的

data

键写为

data: () => ({

这不是通常的正确语法

data() {

当谈到

this

的用法时，它确实没有相同的含义。