Bootstrap Vue：选择表单占位符未显示答案

【问题标题】：Bootstrap Vue: Select form placeholder not showingBootstrap Vue：选择表单占位符未显示
【发布时间】：2021-04-26 09:09:57
【问题描述】：

我有一个带有选择元素的 Bootstrap Vue 表单。我希望选择元素在未选择任何内容时显示占位符。问题是在您选择一个选项之前，选择元素呈现为空。

有人知道如何解决这个问题吗？

<!-- COMPANY FILTER -->
        <div class="company-search" v-if="this.users.length != 0">
            <!-- @change="filterByCompany" -->
            <b-form @change="filterUsers">
                <b-form-group id="select-company-form-group" label="Filter by company:" label-for="select-company">
                    <b-icon icon="list" class="company-search-icon"></b-icon>
                    <b-form-select
                    id="select-company"
                    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】：

这里有一些很好的例子：https://bootstrap-vue.org/docs/components/form-select 他们会告诉你设置默认值的不同方式。

要禁用占位符值，您只需这样做：

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

【讨论】：

我一直在查看文档，但找不到问题的解决方案。在所有示例中，第一个选项是占位符。我尝试在第一个选项的对象中设置selected: true，但它仍然显示为空。谢谢你的回答:)
v-model 变量“selected”是被选中的默认值。在第一个示例的情况下，它为 null，这意味着将选择值为 null 的选项
谢谢。由于 v-model 变量是一个空字符串，我不得不将第一个选项中对象的值更改为一个空字符串，如下所示：{ value: '', text: 'Filter by company' }。感谢您的帮助！