Vue.js 测试Vee验证确认规则

我在用Vuetify构建的Vue表单上测试Vee Validate确认函数时遇到了一些困难。我尝试测试的组件如下所示：

<template>
    <form novalidate ref="loginForm" v-model="formValid" @submit.stop.prevent="formSubmitted" @keyup.enter="formSubmitted">
      <v-container grid-list-md text-xs-center>
        <v-layout column>
          <v-flex>
            <v-text-field
              name="passwordField"
              label="Enter your Password"
              hint="At least 6 characters"
              v-model="submissionDetails.password"
              :type="passwordShown ? 'text' : 'password'"
              min="6"
              required
              :append-icon="passwordShown ? 'visibility_off': 'visibility'"
              :append-icon-cb="()=>(passwordShown = !passwordShown)"
              v-validate="'required|min:6'"
              data-vv-name="password"
              :error-messages="errors.collect('password')"
              ref="password"
              @change="inputTriggered"
              @input="inputTriggered"
            />
          </v-flex>
          <v-flex v-show="createAccountTicked">
            <v-text-field
              name="confirmPasswordField"
              label="Confirm your Password"
              hint="At least 6 characters"
              v-model="confirmPassword"
              :type="passwordShown ? 'text' : 'password'"
              min="6"
              required
              :append-icon="passwordShown ? 'visibility_off': 'visibility'"
              :append-icon-cb="()=>(passwordShown = !passwordShown)"
              v-validate="'required|confirmed:$password'"
              data-vv-name="confirmPassword"
              :error-messages="errors.collect('confirmPassword')"/>
          </v-flex>
        </v-layout>
      </v-container>
    </form>
  </template>
  <script>
  export default {
    name: 'email-password-form',
    data () {
      return {
        submissionDetails: {
          email: '',
          password: ''
        },
        confirmPassword: '',
        passwordShown: false,
        createAccountTicked: false
      };
    }
  };
</script>

---

从上面的代码可以看出，虽然密码和confirmPassword字符串确实匹配，但验证器仍然将confirm password字段标记为有错误。我不明白为什么会出现这种情况，但如果有任何帮助，我将不胜感激。

因此，事实证明，这种行为是由于Vee Validate如何比较多字段验证的值，以及这些值是如何传播的。（见附件）

最简单的解决方案是使用新的

is

验证规则，它允许我与模型进行比较，而不是与字段的内容进行比较。我刚刚将

v-validate

规则内容从

'required | confirmed:$password'

更改为

v-validate=“{required:true，is:submissionDetails.password}”

---

如果其他人有此问题，我将把它留在这里。

在我的情况下，这两种方法中的任何一种都适用于我：

<input 
 v-validate="{ required : true,  confirmed: 'password'}" 
 type="password" name="confirm_password"  
 class="form-control" 
 placeholder="Confirm Password" 
 v-model="field.confirm_password" 
 data-vv-as="confirm password">

<input 
 v-validate="{ required : true,  confirmed: field.password}" 
 type="password" name="confirm_password"  
 class="form-control" 
 placeholder="Confirm Password" 
 v-model="field.confirm_password" 
 data-vv-as="confirm password">

---

以下修复了我在chrome中遇到的问题，由于

required

和

confirmed:password

组合为

v-validate=“'required | confirmed:password'”

---

谢谢！我花了好几个小时在这上面/

<input 
 v-validate="{ required : true,  confirmed: 'password'}" 
 type="password" name="confirm_password"  
 class="form-control" 
 placeholder="Confirm Password" 
 v-model="field.confirm_password" 
 data-vv-as="confirm password">

<input 
 v-validate="{ required : true,  confirmed: field.password}" 
 type="password" name="confirm_password"  
 class="form-control" 
 placeholder="Confirm Password" 
 v-model="field.confirm_password" 
 data-vv-as="confirm password">

 <input

 v-validate="{ required : true,  confirmed: field.password}" 

 type="password" name="confirm_password"  
 class="form-control" 
 placeholder="Confirm Password" 
 v-model="field.confirm_password" 
 data-vv-as="confirm password">