I have a Bootstrap Vue form with a select element. I would like the select element to show a placeholder when nothing is chosen. The problem is that the select element renders empty until you choose an option.

Anyone have any clue on how to fix this?

<!-- COMPANY FILTER -->
        <div class="pany-search" v-if="this.users.length != 0">
            <!-- @change="filterByCompany" -->
            <b-form @change="filterUsers">
                <b-form-group id="select-pany-form-group" label="Filter by pany:" label-for="select-pany">
                    <b-icon icon="list" class="pany-search-icon"></b-icon>
                    <b-form-select
                    id="select-pany"
                    v-model="selectedCompany"
                    :options="[{ value: null, text: 'Select One' }, 'ALTiPROSJEKT AS', 'AiP BETONGSAGING AS', 'AiP ENTREPENØR AS', 'AiP SANERING AS', 'AiP UTLEIE AS']"
                    >
                    </b-form-select>
                </b-form-group>
            </b-form>
        </div>

I have a Bootstrap Vue form with a select element. I would like the select element to show a placeholder when nothing is chosen. The problem is that the select element renders empty until you choose an option.

Anyone have any clue on how to fix this?

<!-- COMPANY FILTER -->
        <div class="pany-search" v-if="this.users.length != 0">
            <!-- @change="filterByCompany" -->
            <b-form @change="filterUsers">
                <b-form-group id="select-pany-form-group" label="Filter by pany:" label-for="select-pany">
                    <b-icon icon="list" class="pany-search-icon"></b-icon>
                    <b-form-select
                    id="select-pany"
                    v-model="selectedCompany"
                    :options="[{ value: null, text: 'Select One' }, 'ALTiPROSJEKT AS', 'AiP BETONGSAGING AS', 'AiP ENTREPENØR AS', 'AiP SANERING AS', 'AiP UTLEIE AS']"
                    >
                    </b-form-select>
                </b-form-group>
            </b-form>
        </div>

• javascript
• forms
• twitter-bootstrap
• vue.js
• html-select

1 Answer 1

There are some great examples on here: https://bootstrap-vue/docs/ponents/form-select they talk you through the different ways of setting default values.

To disable your placeholder value all you have to do is this:

:options="[{ value: null, text: 'Select One', disabled: true }, 'ALTiPROSJEKT AS', 'AiP BETONGSAGING AS', 'AiP ENTREPENØR AS', 'AiP SANERING AS', 'AiP UTLEIE AS']"