はじめに
- vee-validateで覚えたことを下記にまとめる
<validation-provider>タグを利用するとレイアウトが崩れる現象に遭遇したので、その時のメモ。
レイアウトが崩れるコード
<validation-provider>を埋め込むとdivタグが自動で生成されるため、レイアウトが崩れていた。
<validation-provider rules="required|nameKanji:@姓,@名" name="姓" >
<div class="hogehoge">
<p class="inputform_input-title">
姓
</p>
<input v-model="sei" name="sei" type="text" class="hogehoge" placeholder="やまだ">
</div>
</validation-provider>
<validation-provider rules="required|nameKanji:@姓,@名" name="名">
<div class="hogehoge">
<p class="inputform_input-title">
名
</p>
<input v-model="mei" name="mei" type="text" class="hogehoge" placeholder="たろう">
</div>
</validation-provider>
レイアウトが崩れないコード
<validation-provider>タグにtag属性とレイアウトに必要なclass属性を指定することでレイアウトを崩れずに対応できました。
<validation-provider rules="required|nameKanji:@姓,@名" tag="div" name="姓" class="hogehoge">
<p class="inputform_input-title">
姓
</p>
<input v-model="sei" name="sei" type="text" class="hogehoge" placeholder="やまだ">
</validation-provider>
<validation-provider rules="required|nameKanji:@姓,@名" tag="div" name="名" class="hogehoge">
<p class="inputform_input-title">
名
</p>
<input v-model="mei" name="mei" type="text" class="hogehoge" placeholder="たろう">
</validation-provider>
参考ページ
vee-validate.logaretm.com
