日々精進

新しく学んだことを書き留めていきます

vee-validateのvalidation-providerに複数のv-modelを渡すとブラウザが固まる

以下のように書くと、ブラウザが固まる現象が起きた。

※pugで記述している

            validation-provider(v-if="!hasPreviousOrder" rules="required" v-slot="{ errors }")
              input.form-control.mt-2(v-if="!isPasswordVisible", type='password', v-model="order.level5Password", placeholder='Level5IDのパスワード')
              input.form-control.mt-2(v-if="isPasswordVisible", type='text', v-model="order.level5Password", placeholder='Level5IDのパスワード')
              .errorMessage {{ errors[0] }}
              b-form-checkbox.mt-2(v-model="isPasswordVisible") パスワードを表示する

この現象について書いているサイトは見付からなかったが、 色々試した結果、validation-providerに渡すhtml blockにv-modelが複数あり、かつそれぞれ異なるfieldをbindしていると発生するっぽい。

以下のようにb-form-checkboxをvalidation-providerの外に出すと直った。

vee-validateのバージョンは3.2.1。

            validation-provider(v-if="!hasPreviousOrder" rules="required" v-slot="{ errors }")
              input.form-control.mt-2(v-if="!isPasswordVisible", type='password', v-model="order.level5Password", placeholder='Level5IDのパスワード')
              input.form-control.mt-2(v-if="isPasswordVisible", type='text', v-model="order.level5Password", placeholder='Level5IDのパスワード')
              .errorMessage {{ errors[0] }}
            b-form-checkbox.mt-2(v-model="isPasswordVisible") パスワードを表示する