Vue select 不突出显示下拉列表中的 selected 项目

Question

我正在使用 vue-select。当我加载表单时，下拉列表中的项目不是 selected。当我打开下拉菜单时，第一项是 selected:

当我 select 一个项目，并重新打开下拉菜单时，该项目被 selected（如预期的那样）

                    <div class="col-lg-6">
                        <div class="form-group row">
                            <label for="customer" class="col-sm-2 col-form-label">Kunde</label>
                            <div class="col-sm-10">
                                <v-select :options="customers" :reduce="name => name.id"  v-model="form.customer_id" id="customer" label="name" placeholder="Kunde" :class="$vSelectStyle($v.form.customer_id)"></v-select>

                                <template v-if="$v.form.customer_id.$error" >
                                    <p class="text-danger" v-if="!$v.form.customer_id.required">
                                        Name ist erforderlich!
                                    </p>
                                </template>
                            </div>
                        </div>
                    </div>

第一次 select 编辑该项目时我必须做什么？

Answer 1

您可以添加 v-model="someVar" 并将其设置为您选择的某个默认值（如果这是您要查找的内容）。检查link以供参考。

Answer 2

只需将 style/css 添加到所选中..

.vs__dropdown-option--selected {
  background-color: red  !important;
}

在此处查看示例：Fiddle

这也适用于多个。

Vue select 不突出显示下拉列表中的 selected 项目

Vue select not highlight selected Item in Dropdown

vue-select