More than 5 years have passed since last update.

VeeValidateを使ったらスタイルが崩れた話し

Last updated at 2020-11-09Posted at 2020-11-09

VeeValidateでValidationProviderを使った時にスタイルが崩れることがあった。

例えばこのように書いた時に

<ValidationProvider name="メッセージ" rules="required">
  <input type="text" v-model="message">
</ValidationProvider>

レンダリングされるHTMLの中に

<span>
  <input type="text">
</span>

謎のspanタグが追加されてしまいスタイルが崩れてしまった。

<ValidationProvider name="メッセージ" rules="required" slim>
  <input type="text" v-model="message">
</ValidationProvider>

こうすることで

<input type="text">

レンダーレスを強制することができる

タグの中にslimを追加することで解消した。

ちなみにtag="div"などを追加することで、divタグでレンダリングすることもできる