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-selectb-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)的主要内容,如果未能解决你的问题,请参考以下文章

在 vue.js 中获取选定的下拉值

正确单击数据网格中的按钮时,Telerik RadGridView 选定项绑定不起作用

vue.js的select下拉框怎样绑定事件和取值

Vue.js:如何在选择下拉框中获取选项的属性?

如何在ul下拉菜单中显示选定的菜单项

如何使用 node js、mongoDB 和 vue js 实现动态依赖选择下拉菜单?