Vue.js - 选择/下拉选定项 vm 绑定不起作用(bootstrap-vue)
Posted
技术标签:
【中文标题】Vue.js - 选择/下拉选定项 vm 绑定不起作用(bootstrap-vue)【英文标题】:Vue.js - Select / dropdown selected item vm binding is not working (bootstrap-vue) 【发布时间】:2018-04-17 21:32:15 【问题描述】:我正在尝试创建一个简单的 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】:bootstrap-vue
中的b-dropdown
不支持v-model
。正如the documentation 所说:
下拉菜单是可切换的上下文叠加层,用于显示 下拉菜单格式的链接和操作。
换句话说,b-dropdown
本质上是一个用于显示菜单或类似选项集的 UI 组件。
我希望你想要的是b-form-select
。
也就是说,您可以将点击处理程序添加到设置值的选项中。
<b-dropdown-item v-for="option in ddTestVm.options"
:key="option.value"
:value="option.value"
@click="ddTestVm.ddTestSelectedOption = option.value">
这是working example。
【讨论】:
好尴尬 :) 谢谢! 任何想法为什么 :on-change="changeItem" 不起作用?该事件似乎永远不会触发。 @billyjean 对于什么组件?b-form-select
或 b-dropdown
都不会发出 on-change
事件或接受 on-change
属性。【参考方案2】:
我觉得你需要 b-form-select
<template>
<div>
<b-form-select v-model="selected" :options="options"></b-form-select>
<b-form-select v-model="selected" :options="options" size="sm" class="mt-3"></b-form-select>
<div class="mt-3">Selected: <strong> selected </strong></div>
</div>
</template>
<script>
export default
data()
return
selected: null,
options: [
value: null, text: 'Please select an option' ,
value: 'a', text: 'This is First option' ,
value: 'b', text: 'Selected Option' ,
value: C: '3PO' , text: 'This is an option with object value' ,
value: 'd', text: 'This one is disabled', disabled: true
]
</script>
【讨论】:
【参考方案3】:只有b-form-select可以实现选择值行为。
非选定值预览:
选定值预览:
示例代码:
<template>
<div>
<b-form-select v-model="selected" :options="options"></b-form-select>
</div>
</template>
<script>
export default
data()
return
selected: null,
options: [
value: 1, text: 'Please select an option' ,
value: 2, text: 'This is First option' ,
value: 3, text: 'Selected Option'
]
</script>
【讨论】:
以上是关于Vue.js - 选择/下拉选定项 vm 绑定不起作用(bootstrap-vue)的主要内容,如果未能解决你的问题,请参考以下文章