以下のように書くと、ブラウザが固まる現象が起きた。
※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") パスワードを表示する