驗證密碼確認無效

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