0

I have a problem with VueJS and using Vee-validate.

I am trying to confirm a password regarding another one but it feels like it can't find the ref of password. I am using ref and have been looking for all the existent issues but it still does not solve my problems.

<template>
  <div :class="customClass" v-if="show">
    <label :for="name" v-if="label">{{ label }}</label>
    <div class="relative">
      <input class="w-full" :class="{ 'is-danger': errors.has(name, scope) }" :type="inputHidden? 'password' : 'text'" :data-vv-scope="scope" :data-vv-as="label.toLowerCase()" v-validate="`${validate}`" :id="name" :name="name" v-model="newValue">
      <div @click="inputHidden = !inputHidden">
        <icon-eye class="h-4 absolute pin-r pin-t mt-2 mr-2 cursor-pointer" width="25" v-show="!inputHidden" />
        <icon-disabled-eye class="h-4 absolute pin-r pin-t mt-2 mr-2 cursor-pointer" width="25" v-show="inputHidden" />
      </div>
      <span :class="`${customClass}-error`" v-if="errors.has(name, scope)">{{ errors.first(name, scope) }}</span>
    </div>
  </div>
</template>
<script>

And call the component recursively:

<div class="mb-4" v-for="field in forms.password.fields" :key="field.name">
       <component :is="field.type" v-model="forms.password.values[field.name]" :name="field.name" :placeholder="field.placeholder" :label="field.label" :custom-label-class="field.customLabelClass" :scope="field.scope" :validate="field.validate" :elements="field.elements" :show="field.show" :on-change="field.onChange" />
</div>

By giving these props:

password: {
        values: {
          password: ''
        },
        fields: [{
          name: 'password',
          type: 'input-password',
          label: this.$t('commons.labels.new-password'),
          validate: 'required|verify_password'
        }, {
          name: 'confirmPassword',
          type: 'input-password',
          label: this.$t('commons.labels.confirm-new-password'),
          validate: 'required|confirmed:$password'
        }].map((item) => {
          item['scope'] = 'password'

          return item
        }),

Here is my sandbox to show what's wrong.

Angele
  • 31
  • 3
  • 3
    Hi and welcome. On Stack Overflow, you must include the code necessary to answer the question **in the question itself**. The link is great - keep that too, but in the future, if that website goes away, your question should "stand alone" without needing the link to explain the issue. – Ryley Jun 28 '18 at 16:02

1 Answers1

0

this work for me: v-validate="{required: true, is: modelPassword}"

Andres Solarte
  • 11
  • 1