vue如何获取下拉框中选中值的label和key

在 Vue 中，通过 `v-model` 绑定下拉框的选中值，可以直接获取选中项的 value。如果想要获取选中项的 label 和 key（即选项的文本和 value 对应的属性名），可以通过下拉框的 `options` 数组来获取。

假设我们有一个下拉框，其中的选项是一个 JSON 数组，每个选项都有一个 `id` 和 `name` 属性，我们可以这样获取选中项的 label 和 key：

<template>
  <div>
    <select v-model="selectedOption">
      <option v-for="option in options" :value="option.id">{{ option.name }}</option>
    </select>
    <p>你选择了选项 {{ selectedOption }}，它的名称是 {{ selectedOptionName }}，它的 key 是 {{ selectedOptionKey }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {id: 1, name: '选项1'},
        {id: 2, name: '选项2'},
        {id: 3, name: '选项3'}
      ],
      selectedOption: null
    }
  },
  computed: {
    selectedOptionName() {
      // 通过 selectedOption 获取选中的选项的名称
      const selectedOption = this.options.find(option => option.id === this.selectedOption)
      return selectedOption ? selectedOption.name : ''
    },
    selectedOptionKey() {
      // 通过 options 和 selectedOption 获取选中的选项的 key
      const selectedOption = this.options.find(option => option.id === this.selectedOption)
      return selectedOption ? Object.keys(selectedOption)[1] : ''
    }
  }
}
</script>

在上面的示例中，我们通过计算属性 `selectedOptionName` 和 `selectedOptionKey` 分别获取选中项的 label 和 key。在计算属性 `selectedOptionName` 中，我们使用 `Array.prototype.find()` 方法根据选中的 `id` 获取对应的选项，最终返回选项的名称。在计算属性 `selectedOptionKey` 中，我们同样使用 `Array.prototype.find()` 方法根据选中的 `id` 获取对应的选项，然后通过 `Object.keys()` 方法获取选项对象的属性名数组，最终返回属性名数组的第二个元素，即选项的 key。