🥺

BootstrapVueのスタイルが効かなくて困った

2022/04/30に公開

Bootstrap

Vue.js

BootstrapVue

tech

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>

原因：意図したクラスがついていない

解決策

Discussion