Vue.js 选择器/下拉菜单选定项与 VM 属性绑定全攻略

vue.js

2024-03-31 13:51:29

在 Vue.js 中实现选择器/下拉菜单选定项 VM 绑定的全面指南

问题剖析

在使用 Vue.js 时，有时我们需要将选择器或下拉菜单的选定项绑定到视图模型 (VM) 中的属性。然而，当我们使用包含在 VM 中的选项集合时，实现这一点可能会遇到挑战。本指南将探讨这个问题，并提供清晰易懂的解决方案。

解决方案

要成功地将选择器/下拉菜单选定项绑定到 VM 属性，我们需要遵循以下步骤：

1. 使用 v-model 正确地绑定值

在 b-dropdown 组件上使用 v-model 来绑定选定的值。这将确保下拉菜单和 VM 属性之间保持双向数据绑定。

2. 初始化选定的选项

在 data 函数中，确保初始化 ddTestVm.ddTestSelectedOption 属性。这将为下拉菜单提供一个初始选定项。

3. 正确使用 selected 属性

在 b-dropdown-item 上使用 selected 属性来指示选定项。将 selected 属性绑定到一个布尔值，该布尔值取决于选项值和 ddTestVm.ddTestSelectedOption 的值。

代码示例

根据这些修复，修改后的代码如下：

<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 === ddTestVm.ddTestSelectedOption"
                       :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 () {
        // 这里可以执行一些操作，比如获取远程数据
        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>