BootstrapVueのスタイルが効かなくて困った
17377 ワード
BootstrapVueでフォームを実装したくて、ドキュメントのソースを試したら、ドロップダウンリストとチェックボックスのスタイルが効かなくて困った
原因：意図したクラスがついていない
インスペクタで見てみると、適切なclassが指定されていない様子。本来ならform-controlクラスが適用されてほしいところ、custom-selectクラスが指定されている。
<b-form-group id="input-group-3" label="Food:" label-for="input-3">
<b-form-select
id="input-3"
v-model="form.food"
:options="foods"
required
></b-form-select>
</b-form-group>
<select data-v-91bde120="" id="input-3" required="required" aria-required="true" class="custom-select">
<option data-v-91bde120="" value="">Select One</option><option data-v-91bde120="" value="Carrots">Carrots</option>
<option data-v-91bde120="" value="Beans">Beans</option>
<option data-v-91bde120="" value="Tomatoes">Tomatoes</option>
<option data-v-91bde120="" value="Corn">Corn</option>
</select>
解決策
同様の症状のIssueを見つけたが、これによれば、custom-selectクラスがつくのは正常らしい。
form-controlクラスにしたければpropにplainを入れろとのことだったので、試したところ期待通りに動いた。
<b-form-group id="input-group-3" label="Food:" label-for="input-3">
<b-form-select
id="input-3"
v-model="form.food"
:options="foods"
required
plain
></b-form-select>
</b-form-group>
<select data-v-91bde120="" id="input-3" required="required" aria-required="true" class="form-control">
<option data-v-91bde120="" value="">Select One</option><option data-v-91bde120="" value="Carrots">Carrots</option>
<option data-v-91bde120="" value="Beans">Beans</option>
<option data-v-91bde120="" value="Tomatoes">Tomatoes</option>
<option data-v-91bde120="" value="Corn">Corn</option>
</select>
チェックボックスも同様。
<b-form-group id="input-group-4" v-slot="{ ariaDescribedby }">
<b-form-checkbox-group
v-model="form.checked"
id="checkboxes-4"
:aria-describedby="ariaDescribedby"
plain
>
<b-form-checkbox value="me">Check me out</b-form-checkbox>
<b-form-checkbox value="that">Check that out</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
Author And Source
この問題について(BootstrapVueのスタイルが効かなくて困った), 我々は、より多くの情報をここで見つけました https://zenn.dev/kozy/articles/56eb46e2638957著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol