Vee-validate: Has method with scope name only

[mathieu-gilloots]

Versions:

• VueJs: 2.5.13
• Vee-Validate: 2.0.1

Description:

I want to display a block of error message in my component.
All v-validate are associated with data-vv-scope.

Now, i've created a bloc for that :
<span class="danger" v-show="errors.has('scope.field1') || errors.has('scope.field2')"> {{ errors.first('scope.field1') }} {{ errors.first('scope.field2') }} </span>
It's work.
I wondering if it that possible to shorten that. like errors.has('scope.*') or scope alone, my tests isn't working with it.
with that, can I make a for loop to display every messages ?
Thanks.

[logaretm]

Currently there is no built in way to do that, I will tag this as a future enhancement.

In the meantime you could use the flags with mapFields to produce the same result:

[mathieu-gilloots]

Hi @logaretm Thanks for the answer;
Do you have any example ? with my case ?

Thanks.

[logaretm]

Scopes are nested inside the fields object with their keys prefixed by $, meaning you could create a computed property to check if a scope is valid:

<template>
   <div v-if="isScopeValid"></div>
</template>

<script>
export default {
  computed: {
    isScopeValid () {
      return Object.keys(this.fields.$scope).every(field => {
        return this.fields.$scope[field].valid;
      });
    }
  }
};
</script>

This can be simplified with the mapFields helper:

<template>
   <div v-if="scopeFlags.valid"></div>
</template>

<script>
export default {
  computed: {
    ...mapFields({
       scopeFlags: 'scope.*'
     })
  }
};
</script>

[mathieu-gilloots]

It's work but with only 1 scope, is there a way to make the things dynamic ? like scopeFlags[this.currentStep].valid ?
Thanks.

[logaretm]

It is now implemented as suggested: errors.has('scope.*')

[elenamf86]

You can display every errors for one scope like this:

<div v-show="errors.any('SCOPE_NAME')" class="error-message">
        <ul>
        <li v-for="error in errors" v-if="error.scope=='SCOPE_NAME'">
            {{ error.msg }}
        </li>
    </ul>
</div>

or like this:

<div v-show="errors.any('SCOPE_NAME')" class="error-message">
        <ul>
        <li v-for="error in errors.all('SCOPE_NAME')">
            {{ error}}
        </li>
    </ul>
</div>