Vee-validate: validation observer v-slot not working in IE11 browser

[chanukyad]

IE11issue.txt

Attached code is working fine in all browsers except IE11.

We have observed that with v-slot="invalid" is working fine in IE11 but invalid flag is not updating to False once all the fields are validated.

[chanukyad]

This is problem with Destructuring Assignment which IE won't support. Found the alternative of doing it and worked. So issue is no more.

[fvanhove]

@chanukyad , Care to share how you managed to fix this problem?

[geert-plessers]

@chanukyad yes, could you please share the fix for this problem? thanks

[logaretm]

@geert-plessers @fvanhove

They replaced using ES6 destructing to ES5 friendly syntax like:

from:

v-slot="{ errors }"

<span>{{ errors[0] }}</span>

to:

v-slot="props"

<span>{{ props.errors[0] }}</span>

[geert-plessers]

Hi @logaretm ,

Thank you for your response. I have rewritten my Vue component in line with the ES5-friendly example, but unfortunately I still get the same error messages in Internet Explorer 11.

Your help is much appreciated. See below the error and a very simplified part of my Vue component using the ValidationObserver and ValidationProvider.

Kind regards,

Geert

IE11 Error:

[Vue warn]: Error in render: "TypeError: Unable to get property 'errors' of undefined or null reference"

found in---> <ValidationObserver>       
                <ContactForm> at resources/js/components/forms/ContactForm.vue         
                    <Root>


[Vue warn]: Error in render: "TypeError: Unable to get property 'length' of undefined or null reference"

found in---> <ValidationProvider>       
                <ValidationObserver>         
                    <ContactForm> at resources/js/components/forms/ContactForm.vue           
                        <Root>

ContactForm.vue (Simplified):

<template>
    <div class="form contact-form">
        <ValidationObserver v-slot="props" ref="observer" tag="form" @submit.prevent="submit()">
                    <ValidationProvider rules="required|min:2" v-slot="props" :name="translations.company_label" :slim="true">
                        <div class="form-group position-relative" :class="props.classes">
                            <label for="company">{{ translations.company_label }}</label>
                            <input type="text" id="company" class="form-control" :placeholder="translations.company_label" v-model="formData.company" />
                            <span class="error">{{ props.errors[0] }}</span>
                        </div>
                    </ValidationProvider>
            ...

            <button :disabled="props.invalid" class="btn btn-primary btn-lg">{{ translations.submit }}</button>
        </ValidationObserver>
    </div>
</template>

<script>
import { ValidationProvider } from 'vee-validate';

export default {
    components: {
        ValidationProvider
    },

   ...
}
</script>

[geert-plessers]

@logaretm

Hi,

If you were to find some time to look at my previous response, I'm still having problems with the issue. Maybe the issue could be reopened. Thank you.

Kind regards,

Geert

[JoelPintoRibeiro]

Same problem here, is there any workaround?

[logaretm]

Here is a fully working snippet in IE11, again nothing extra is done other than providing a polyfill for ES6's Promise and ensuring no ES6 destructing is being used.

https://jsfiddle.net/logaretm/bwuqaog1/9/

[JoelPintoRibeiro]

Thank you @logaretm i ended with the same solution and its working for me ;)

I hate internet explorer ! Every time i have to rewrite everything juste to be working with it :(

(destructing/promises/normalize/includes etc...)

[geert-plessers]

@logaretm thank you so much for your response! I've managed to get it working!

I think the polyfill.io service fixed a lot of things for me. This is a really great thing to use. Other than that I've also replaced the destructuring syntax just to be safe.