Vee-validate: What is the correct syntax for multiple rules

[kiwo12345]

I have input fields that looks like this:

<input class="img1" type="file" v-validate ="{ rules: { required: imgGroupVal, image: true, size: 8192, mimes: 'image/jpeg,image/jpg,image/png', ext: 'jpg,jpeg,png' } }" >

<input class="img2" type="file" v-validate ="{ rules: { required: imgGroupVal, image: true, size: 8192, mimes: 'image/jpeg,image/jpg,image/png', ext: 'jpg,jpeg,png' } }" >

The only problem is that mimes: 'image/jpeg,image/jpg,image/png', ext: 'jpg,jpeg,png' always fails.

I have also tried to write the rule like this:

v-validate="'required:imgGroupVal|image|size:8192|mimes:image/jpeg,image/jpg,image/png|ext:jpg,jpeg,png'"

But then my required rule doesnt work that is driven by a computed value imgGroupVal

So how do I need to change my syntax bellow in order to make it work
v-validate ="{ rules: { required: imgGroupVal, image: true, size: 8192, mimes: 'image/jpeg,image/jpg,image/png', ext: 'jpg,jpeg,png' } }"

[logaretm]

mimes should be an array of mime types, not a single string:

mimes: ['image/jpeg', 'image/jpg', 'image/png']

Also the object form should only contain the rules, so nesting it under rules property is redundant and will be deprecated soon.

v-validate ="{ rules: { required: imgGroupVal, image: true, size: 8192, mimes: ['image/jpeg', 'image/jpg', 'image/png'], ext: ['jpg', 'jpeg', 'png'] } }"

In the String format, commas separates the list of arguments passed to the rule. While in the object format you should pass an array directly.

[kiwo12345]

@logaretm big thanks for the example.
But if the rules proerty will be deprecated does this mean I have to write the rules like string eg
v-validate="'required:imgGroupVal|image|size:8192'"

The problem is when I wrote my rules as a string above then the required:imgGroupVal stoped working

[logaretm]

No, you will just pass it as an object directly which works fine, I didn't update the example properly:

v-validate ="{ required: imgGroupVal, image: true, size: 8192, mimes: ['image/jpeg', 'image/jpg', 'image/png'], ext: ['jpg', 'jpeg', 'png'] }"

[kiwo12345]

@logaretm oh I see.
Well thanks again for the help! Its an awesome lib!

[adambloomer]

Just adding this here if anyone else needs this.

I had a requirement to combine multiple required rules in an OR format and so this worked for me:

v-validate ="{ rules: { required: this.formData.firstName || this.formData.lastName || this.formData.email } }"

this would mean that if anyone had entered either firstname, lastname or email then the field in question (a checkbox for permission) would then be required.