v-slot="{ validate, errors }" をIE１１で使えるようにするには

v-slotの書き方 for IE11

先日、VeeValidate の ValidationProviderを使っていて、v-slotの書き方でIE11に対応したときの備忘録です。

vue.js のv-slotの指定方法で、IE11以外だと

a.js

<ValidationProvider v-bind:rules="'required|max:20'" name="'ほげ'" v-slot="{ validate, errors }" slim>
    <input v-bind:value="value"
       @input="validate($event)"
    />
    <span id="error">{{ errors[0] }}</span>
</ValidationProvider>

て書けるのですが、IE11だとスクリプト言語仕様によりスクリプトエラーになってしまいます。

IE11に対応した書き方をするには、以下のようなコードにすることで対応可能なことがわかりました。

b.js

<ValidationProvider v-bind:rules="'required|max:20'" name="'ほげ'" v-slot="slotProps" slim>
    <input v-bind:value="value"
       @input="slotProps.validate($event)"
    />
    <span id="error">{{ slotProps.errors[0] }}</span>
</ValidationProvider>

IE11
vue.js v2.6.10
vee-validate v2.2.15