del*_*lux 2 select vue.js vuejs2 vue-select bootstrap-vue
我正在使用 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>
Run Code Online (Sandbox Code Playgroud)
其中对应的数据定义为:
let item = {
label: "some text goes here",
inputType: 'text',
select: {
selected: '15',
options: [
'5',
'10',
'15',
'20'
]
}
}
Run Code Online (Sandbox Code Playgroud)
从 UI 的输出中,我们可以看到条件被正确评估(检查项目“15”的条件返回“true”)。选择控件如下所示:
如果我检查 HTML,它看起来像:
但是,我在这里需要的是,为了能够在加载控件期间,将传递的参数传递到“ item.select.selected ”中,以实际显示要预选的选择控件中的哪个选项(在页面加载时)。在我尝试的许多选项中,我的选择控件在页面加载时没有被选中。
有没有办法实现这一目标?
小智 5
您可以将默认值直接绑定到<select>
with v-model
。如果您将它绑定到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>
Run Code Online (Sandbox Code Playgroud)
这是显示默认值的代码:https : //jsfiddle.net/adampiziak/eywraw8t/146114/
文档:https
: //vuejs.org/v2/guide/forms.html#Select
another answer:将默认值设置为选项选择菜单
归档时间: |
|
查看次数: |
21849 次 |
最近记录: |