我正在尝试在 Vue 中创建一个选择组。
Fiddle: https://jsfiddle.net/Tropicalista/vwjxc5dq/
我试过这个:
<optgroup v-for="option in options" v-bind:label="option">
<option v-for="sub in option" v-bind:value="option.value">
{{ sub.text }}
</option>
</optgroup>
My data:
data: {
selected: 'A',
options: {
First: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' }
],
Second: [
{ text: 'Three', value: 'C' }
]
}
}
您正在绑定label
归因于option
,这是一个数组。您想要的是绑定到对象的键。
您可以通过在中指定第二个参数来获取每个选项的键v-for
指示:
<optgroup v-for="(option, key) in options" v-bind:label="key">
我也想重命名你的options
财产给optionGroups
为避免进一步混淆:
data: {
selected: 'A',
optionGroups: {
First: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' }
],
Second: [
{ text: 'Three', value: 'C' }
]
}
}
这样,模板就会更有意义:
<optgroup v-for="(group, name) in optionGroups" :label="name">
<option v-for="option in group" :value="option.value">
{{ option.text }}
</option>
</optgroup>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)