vue.js - 如何从带有option和optgroups的select标记中获取值？

嘿，我需要从带有2个optgroups和一些选项的Select Tag中获取值

这是我的html:

<select id="rackSelect" @dataChange="rack=$event" label="Rack Units">
  <option disabled selected>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>

我需要一个开关盒的值(value)。

rackBeautiful(): string | undefined {
  switch (this.rack) {
    case 'quarter':
      this.rack = "quarter";
      break;

    case 'half':
      return 'half rack';
    case 'full':
      return 'full rack';
    default:
      if (isNaN(this.rack))
        return 'immer default?';
      else
        return ' Rack Units';
  }
}

我正在使用没有jQuery的vue.js。

有人知道吗？

最佳答案

这是使用vueJs的解决方案:
只需添加v-model并添加方法@change:

<select id="rackSelect" v-model="selectedVal" @change="showVal" label="Rack Units">***your options***</select>

jsFiddle示例:https://jsfiddle.net/49gptnad/3966/

关于vue.js - 如何从带有option和optgroups的select标记中获取值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50391612/