我正在尝试创建一个简单的vue,将所选项目从选择/下拉列表绑定到vm中的属性 . 当使用也在视图模型中的选项集合时,我无法找到一个清晰而简单的示例,说明它是如何关闭的 .
<template>
<div>
<h1>Select box</h1>
<b-dropdown id="ddCommodity"
name="ddCommodity"
v-model="ddTestVm.ddTestSelectedOption"
text="Select Item"
variant="primary"
class="m-md-2" v-on:change="changeItem">
<b-dropdown-item disabled value="0">Select an Item</b-dropdown-item>
<b-dropdown-item v-for="option in ddTestVm.options":selected="option.value == 'LME/ST_TNI_ALL'":value="option.value">{{option.text}}</b-dropdown-item>
</b-dropdown> <span>Selected: {{ ddTestVm.ddTestSelectedOption }}</span>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
someOtherProperty: null,
ddTestVm: {
originalValue: [],
ddTestSelectedOption: "Value1",
disabled: false,
readonly: false,
visible: true,
color: "",
options: [
{
"value": "Value1",
"text": "Value1Text"
},
{
"value": "Value2",
"text": "Value2Text"
},
{
"value": "Value3",
"text": "Value3Text"
}
]
}
}
},
methods: {
changeItem: async function () {
//grab some remote data
try {
let response = await this.$http.get('https://www.example.com/api/' + this.ddTestVm.ddTestSelectedOption + '.json');
console.log(response.data);
this.someOtherProperty = response.data;
} catch (error) {
console.log(error)
}
}
},
watch: {
},
async created() {
}
}
</script>
<style>
</style>
无论我尝试过什么,我都无法在下拉列表中获取所选值以更改vm的ddTestSelectedOption属性 .
1 回答
b-dropdown
在bootstrap-vue
中不支持v-model
. 如the documentation所述:换句话说,
b-dropdown
本质上是用于显示菜单或类似选项集的UI组件 .我希望你想要的是b-form-select .
也就是说,您可以为设置值的选项添加单击处理程序 .
这是working example .