Vee-validate: Problem with Flags and Scope

[guicviegas]

Versions:

• VueJs: 2.3.3
• Vee-Validate: 2.0.0-rc.18

Description:

Good afternoon, guys!

I'm having problem with Flags and Scope after I have updated Vee-Validate from 2.0.0-rc.5 to 2.0.0-rc.18.
It was working perfectly, but when I update it, all stop to work.

My code below:

Header.vue HTML

<form role="form" @submit.prevent="validateForm('login')" method="POST" data-vv-scope="login">
    <div class="form-group">
        <input type="email" name="email" v-validate="'required|email'" v-model="user.email" :class="{'form-control': true, 'is-danger': loginEmailFlags.invalid, 'is-success': loginEmailFlags.valid }" placeholder="Digite seu email" required>
        <i v-show="loginEmailFlags.dirty" :class="{'fa': true, 'fa-times': loginEmailFlags.invalid, 'fa-check': loginEmailFlags.valid }"></i>
    </div>
    <div class="form-group">
        <input type="password" name="login_password" v-validate="'required|min:6'" v-model="user.password" :class="{'form-control': true, 'is-danger': loginPasswordFlags.invalid, 'is-success': loginPasswordFlags.valid }" placeholder="Digite sua senha" required>
        <i v-show="loginPasswordFlags.dirty" :class="{'fa': true, 'fa-times': loginPasswordFlags.invalid, 'fa-check': loginPasswordFlags.valid }"></i>
    </div>
    <button type="submit" class="btn">Login</button>
</form>

Header.vue JS

data(){
    return {
        user: {}
    }
},
computed: {
    ...mapFields({
        loginEmailFlags: 'login.email',
        loginPasswordFlags: 'login.login_password',
    })
}

I don't know what is the problem. It don't show my icon (valid or invalid) or set my classes (is-success or is-danger).

It works:

• removing scope.
  loginEmailFlags: 'email'

It doesn't work:

• with scope.
  loginEmailFlags: 'login.email'

Can someone help me?

Sorry, this isn't my first language. My english is rusty. :)
Thanks!

[logaretm]

This might be a bug, but there is a workaround for now, you can add the data-vv-scope attribute on your inputs instead of the form which should fix the issue for now until I investigate.

https://jsfiddle.net/45pap44r/1/

[guicviegas]

@logaretm

Thanks for reply.
I have another question. If you can help me!

I have set data-vv-scope on input element and here is my problem:
All my scope fields disappeared when I change form one to form two.

an example of my code:
https://jsfiddle.net/1er7oto0/3/

So, I can't use :class="{'form-control': true, 'is-danger': fields.$scope.amount.dirty, 'is-success': fields.$scope.amount.valid } because all input info (dirty, invalid etc) disappeared. :(

Do you have a solution to fix this or you have idea what I should to do?

Thanks man.

[GabrielFalkoski]

Hi,
Same problem here!
Are you found a solution?

Thank you!

[logaretm]

Whenever a field is removed using v-if vee-validate removes it as well along with its flags and errors. if you prefer to keep the field data around use v-show instead.

On a side note, the field data disappear because you have two fields in different forms but they have the exact same scope and name, which confuses the validator.

https://jsfiddle.net/logaretm/1er7oto0/4/

[guicviegas]

@logaretm

You have set a different scope using item.label, interesting!!
There is a way to call the scope on fields.$scope.amount.dirty on :class attribute for example if the name of the scope will depend on the item.label?

Example: :class="{'is-danger': fields.$proposal + item.label.amount.dirty }

You helping me a lot! Thank you very much!! :smile:

[logaretm]

There are a couple of ways to do this, the easiest way is to use the built-in classes assignment by setting the classes option and the classNames.

Vue.use(VeeValidate, {
  classes: true,
  classNames: {
    valid: 'success',
    invalid: 'danger',
    dirty: 'is-dirty'
  }
})

You might want to change the css to include the dirty class to make sure the input isn't aggressive.

.danger.is-dirty {
  border: 1px solid red;
}

.success.is-dirty {
  border: 1px solid green;
}

https://jsfiddle.net/logaretm/1er7oto0/5/

The other way, is like what you are doing but you have to factor in the scope name, like this:

:class="{'is-danger': fields['$proposal' + item.label].amount.dirty }

But becomes very annoying if you want to base the classes on multiple flags, commonly the diry and the invalid flags:

https://jsfiddle.net/logaretm/mLuck41x/

There is also the mapFields helper which might make it easier to combine flags:

http://vee-validate.logaretm.com/examples#flags-example

Closing since this is not a bug, but rather a misuse.