以下の内容はhttps://anton0825.hatenablog.com/entry/2017/05/30/000000より取得しました。


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") パスワードを表示する



以上の内容はhttps://anton0825.hatenablog.com/entry/2017/05/30/000000より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14