代码之家 › 专栏 › 技术社区 › Peter

Vue select不高亮显示下拉列表中的选定项目

vue-select

0

Peter · 技术社区 · 6 年前

我正在使用vue select。加载表单时,下拉列表中的项目未被选中。当我打开下拉列表时,第一项被选中:

当我选择一个项目,并重新打开下拉列表时,该项目被选中(如预期的那样)

                    <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>

我必须做什么才能第一次选中该项目?

0 回复 | 直到 6 年前

1

Donnise David 4 年前

只需将样式/css添加到选定的。。

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

请参见此处的示例: Fiddle

这也适用于多种情况。

2

0

priyanshu sinha 6 年前

你可以添加一个 v-model="someVar" 并将其设置为您选择的某个默认值(如果这是您正在寻找的)。检查 link 供参考。