我试图创建一个简单的vue,将选中的项目从 Select /下拉列表绑定到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>

无论我try 了什么,我都无法在下拉列表中获取所选值来更改vm的ddTestSelectedOption属性.

有人能在这个问题上提供帮助吗?

谢谢

推荐答案

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美元.

Vue.js相关问答推荐

更新 Shopware 管理 CMS 组件中的编辑器视图

vue : 多个样式的类绑定在一个

vite - 具有相对assets资源 路径的子页面

在 Ajax 函数中访问 Vue.js 组件属性

props至少应该定义它们的类型

Rails Webpacker 还是 Vue-CLI?

如何在 vue.js 中删除类

在 Vuejs 中Watch观察 window.scrollY 的变化

CLI 3 - 如何为 CSS/Sass 创建vendor bundle ?

全局方法和实例方法有什么区别?

vue-test-utils:无法覆盖属性 $route,这通常是由于插件将该属性添加为只读值

在 v-for 循环中使用 v-model

当 v-for 与对象的属性一起使用时,将 v-model 与复选框一起使用

我可以修改 Vue.js VNodes 吗?

VueJS错误避免直接改变props

Vuejs获取事件正在调用的元素?

如何从 Vuex 操作访问 Vuex 状态属性?

如何在 Vue.js 中延迟 @keyup 处理程序

带有 Firebase 云消息传递的 Vue pwa 无法正常工作

在~/components/AddPlaceModal.vue中找不到导出AddPlaceModal