Vue.js - 选择/下拉选定项 vm 绑定不起作用（bootstrap-vue）

Question

我正在尝试创建一个简单的 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 属性。

有人可以在这个问题上提供帮助吗？

谢谢。

原文由 billy jean 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

b-dropdown 在 bootstrap-vue 不支持 v-model 。正如 文档 所述：

下拉菜单是可切换的上下文覆盖，用于以下拉菜单格式显示链接和操作列表。

换句话说， 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">

这是一个 工作示例。

原文由 Bert 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只有 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>

原文由 Jerry Chong 发布，翻译遵循 CC BY-SA 4.0 许可协议