Vue.js中如何获取含optgroup的select标签值并处理switch逻辑？

首先咱们先梳理下你代码里的几个核心问题，然后一步步修复：

1. 先修正select的绑定方式（改用Vue推荐的v-model） #

你原来用的@dataChange是错误的，Vue里select的变更事件是@change，但更符合Vue响应式设计的是直接用v-model双向绑定值，这样不用手动处理$event，代码更简洁。

修改后的HTML：

<select id="rackSelect" v-model="rack" label="Rack Units">
  <option disabled value="">Choose a Rack Unit</option>
  <optgroup label="Rack Space">
    <option value="quarter">1/4 Rack</option>
    <option value="half">1/2 Rack</option>
    <option value="full">Full Rack</option>
  </optgroup>
  <optgroup label="Individual Rack Units">
    <option value="1" data-rack_cost="65">1 Rack Unit</option>
    <option value="2" data-rack_cost="130">2 Rack Units</option>
    <option value="3" data-rack_cost="195">3 Rack Units</option>
    <option value="4" data-rack_cost="260">4 Rack Units</option>
    <option value="5" data-rack_cost="325">5 Rack Units</option>
    <option value="6" data-rack_cost="390">6 Rack Units</option>
    <option value="7" data-rack_cost="455">7 Rack Units</option>
    <option value="8" data-rack_cost="520">8 Rack Units</option>
    <option value="9" data-rack_cost="585">9 Rack Units</option>
  </optgroup>
</select>

这里把默认选中的option的value设为空字符串，这样初始时rack的值是空，逻辑更清晰。

2. 修复rackBeautiful方法的逻辑问题 #

你原来的方法有几个明显的问题：

• case 'quarter'里给this.rack赋值，会修改绑定的响应式数据，导致不必要的更新，而且没有返回值；
• default分支的返回逻辑不对，数字类型的选中值没有正确拼接文本；
• 缺少未选择状态的处理。

修正后的方法：

rackBeautiful(): string | undefined {
  switch (this.rack) {
    case 'quarter':
      return '1/4 Rack'; // 或者你想要的'quarter rack'，按需调整
    case 'half':
      return '1/2 Rack';
    case 'full':
      return 'Full Rack';
    case '':
      return undefined; // 未选择时返回undefined，也可以改成提示文本比如'Please select a Rack Unit'
    default:
      // 先判断是否为有效数字
      const rackNum = Number(this.rack);
      if (!isNaN(rackNum)) {
        // 处理单复数
        return `${rackNum} Rack Unit${rackNum !== 1 ? 's' : ''}`;
      }
      return 'Invalid Rack Selection'; // 非法值时的提示
  }
}

额外需求：如果需要获取option的自定义属性（比如data-rack_cost） #

如果你不仅需要选中的value，还想拿到每个option的data-rack_cost，可以结合ref和@change事件来实现：

先给select加ref：

<select id="rackSelect" v-model="rack" @change="getRackCost" ref="rackSelect" label="Rack Units">
  <!-- 选项内容不变 -->
</select>

然后添加方法：

getRackCost() {
  const selectEl = this.$refs.rackSelect as HTMLSelectElement;
  const selectedOption = selectEl.options[selectEl.selectedIndex];
  const rackCost = selectedOption.dataset.rackCost;
  // 可以把成本值存到data里后续使用
  this.rackCost = rackCost;
  console.log('当前机架成本:', rackCost);
}

内容的提问来源于stack exchange，提问作者Dennis Schaffer