gpt4 book ai didi

select - 如何将 bootstrap-vue-select 控件的值设置为在表单加载时预选?

转载 作者:行者123 更新时间:2023-12-03 06:43:38 27 4
gpt4 key购买 nike

我正在使用 VueJS,或者更准确地说 Bootsrap-Vue (select form type) .在模板中,我有以下代码:

<b-form-select>                   
<option v-for="(selectOption, indexOpt) in item.select.options"
:selected="selectOption == item.select.selected ? 'selected' : ''"
:key="indexOpt"
:value="selectOption"
>
{{ selectOption }} - {{ selectOption == item.select.selected }}
</option>
</b-form-select>

其中对应的数据定义为:

let item = {
label: "some text goes here",
inputType: 'text',
select: {
selected: '15',
options: [
'5',
'10',
'15',
'20'
]
}
}

从 UI 的输出中,我们可以看到条件已正确评估(检查项目“15”的条件返回“true”)。选择控件的外观如下:

enter image description here

如果我检查 HTML,它看起来像:

enter image description here

但是,我在这里需要的是,在加载控件期间,将传递的参数传递到“item.select.selected”以实际显示来自哪个选项要预选的选择控件(在页面加载时)。在我尝试过的许多选项中,我的选择控件在页面加载时未被选中。

有什么办法可以实现吗?

最佳答案

您可以将默认值直接绑定(bind)到<select>v-model .如果将其绑定(bind)到 item.select.selected它应该在选择中显示。

<b-form-select v-model="item.select.selected">                   
<option v-for="(selectOption, indexOpt) in item.select.options"
:key="indexOpt"
:value="selectOption"
>
{{ selectOption }} - {{ selectOption == item.select.selected }}
</option>
</b-form-select>

这是显示默认值的代码:https://jsfiddle.net/adampiziak/eywraw8t/146114/

文档:https://v2.vuejs.org/v2/guide/forms.html#Select
另一个答案:Set default value to option select menu

关于select - 如何将 bootstrap-vue-select 控件的值设置为在表单加载时预选?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51218751/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com